点击加载样式,这段js哪里有问题

justforme
  • 26
<ul class="nav navbar-nav navbar-right" id="navigation">
          <li class="Lev1"> <a href="/">网站首页 </a> </li>
          <li class="Lev1"> <a href="/" class="menu1 ">关于我们</a></li>
          <li class="Lev1"> <a href="/" class="menu1 ">客户案例 </a></li>
          <li class="Lev1"> <a href="/" class="menu1 ">新闻中心 </a> </li>
          <li class="Lev1"> <a href="/" class="menu1 ">人力资源 </a></li>
          <li class="Lev1"> <a href="/contact/" class="menu1 ">联系我们 </a></li>
        </ul>

当点击当前栏目的时候,自动给a标签添加一个active的样式,变成<a href="/" class="menu1 active">,请问下面这段js代码哪里有问题,不生效谢谢!

$(document).ready(function(){
var menu = document.getElementById('navigation');
var links = menu.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    links[i].onclick = function () {
        for (var j = 0; j < links.length; j++) {
            if(links[j] == this) {
                this.addClass('active');
            } else {
                links[j].removeClass('active');    
            }
        }
    }
}
});

图片描述

评论
阅读 412
5 个回答
✓ 已被采纳

不明白你有用到jquery,为何还要用js。如果是jquery,只有一句代码就可以了,如下:

$('.nav li a').click(function(e){
    //阻止a标签默认跳转事件
    e.preventDefault();
    $(this).addClass('active').siblings().removeClass('active');
})

如果是js代码,你可以这样写:

 var menu = document.getElementById('navigation');
    var links = menu.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        links[i].index = i;
        links[i].onclick = function (e) {
            e.preventDefault();
            for(var j = 0;j < links.length;j++){
                if(j === this.index){
                    links[j].classList.add('active');
                }else{
                    links[j].classList.remove('active');
                }
            }
        }
    }
    

方法有很多。

第五行应该是 click 吧

clipboard.png
这里的this是dom对象,不是jq对象,没有addClass方法。
如果需要添加样式,可以操作classList


正确写法

if(links[j] == this) {
    this.classList.add('active');
} else {
    links[j].classList.remove('active');    
}

你贴的这段代码有好几处错误导致抛出异常,根据你的需求我修改了下你测试看:

$(document).ready(function(){
    $("#navigation").find("a.menu1").get().forEach(function(n, i, a) {
        n.onclick = function(e) {
            e.preventDefault();
            n.classList.add("active");
            a.filter(function(_, j) {
                return j !== i;
            }).forEach(function(o) {
                o.classList.remove("active");
            });
            window.location.href = n.href;
        }
    });
});

因为你点击a链接的时候页面刷新了啊,你之前设置的样式当然没用了,应该根据跳转后的url判断当前高亮显示那个

    $(document).ready(function () {
      var menu = document.getElementById('navigation');
      var links = menu.getElementsByTagName('a');
      var url = location.href // 或者 location.hash location.search
      var index = 1 // 根据url判断当前那个a链接下
      links[index].className = links[index].className + ' active'
    });
宣传栏