0

图片描述
<div class='cssmenu'>

        <ul>
            <li class='active'><a href='index.jsp'><span>首页</span></a></li>
            <li><a href='recommend.jsp'><span>热门图书</span></a></li>
            <li><a href='staff.html'><span>图书检索</span></a></li>
            <li><a href='contact.html'><span>我的</span></a></li>
             <div class="clear"></div>
         </ul>

</div>

有个导航栏是这样,想根据点击的超链接激活class='active' 这个样式,要如何实现?

点击导航栏会跳进对应的页面,还能用js吗?

点击首页,首页会有红色背景,并跳转到首页的页面

点击热门图书,热门图书会有红色背景,会跳转到热门图书的页面

2018-12-07 提问
2 个回答
0
var li = document.querySelectorAll('li');
for(var i = 0,len = li.length;li < len;i++){
      li[i].index = i;
      li[i].onclick = function(){
         for(var _i = 0,_len = li.length;_i < _len;_i++){
            if(_i === this.index){
                li[_i].className = 'active';//或者li[_i].classList.add('active')
            }else{
               li[_i].className="";//或者li[_i].classList.remove('active');
            }
         }
      }

}
0

var ulList = document.getElementById('ul-list')

var liList = document.getElementsByTagName('li');
for(var i=0; i<liList.length; i++){
    liList[i].addEventListener('click',function(){
        for(var j=0; j<liList.length; j++){
            liList[j].classList.remove('active')
        }
        this.classList.add('active');             
    },false)
}

撰写答案

你可能感兴趣的

推广链接