【CSS】导航栏的样式问题

图片描述
<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吗？

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

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

回答：

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');
            }
         }
      }
}

回答：

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)
}

回答：

抖机灵的话，可以考虑:target这个css3选择器。给新的页面加锚点，然后用锚点选择不用js。如果不用锚点的话，那么就是用js了，在新的页面获取href判断和那个a标签的href增加一下active这个class

http://jsrun.net/UChKp/edit

以上是 【CSS】导航栏的样式问题 的全部内容， 来源链接： utcz.com/a/154039.html

回到顶部