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

Question

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

Answer 1

不明白你有用到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');
                }
            }
        }
    }
    

方法有很多。

Answer 2

第五行应该是 click 吧

Answer 3

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

---

正确写法

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

Answer 4

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

$(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;
        }
    });
});

Answer 5

因为你点击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'
    });