javascript的添加样式问题

sz1001
  • 53

遇到1个问题,请大神指点一下,不知道错在哪里了,请高手帮忙指点一下,谢谢

下面是JS代码

图片描述

下面是HTML代码

图片描述

class="active"的CSS代码我就不贴了,就一个背景颜色
我就想实现,点击1个a标签的时候,就自动给A标签加上class="active",当点击另外一个a标签,这个a标签的class 就为空了

但是我写出来的代码检查了N遍感觉都没有错,调用JS的路径也没错,包括直接把JS代码放在页面里也不行,真不知道问题出在哪里了,求大神指点下,谢谢!

回复
阅读 4.5k
6 个回答

先不说别的,你的这种编程方式就有很大问题。
你在循环里面不停的创建Function对象??你觉得合适么?
我在 @hjzheng 的答案基础上改的:

window.onload = function() {
  var
  eTab = document.getElementById("tab"),
  eAs  = eTab.getElementsByTagName("a"),
  evA  = function() {
    for (var i = 0; i < eAs.length; i ++) {
      eAs[i].className = "";
    }
    this.className = 'red';
  };
  
  for (var i = 0; i < eAs.length; i ++) {
    eAs[i].onclick = evA;
  }
};

测试地址:
http://jsbin.com/sonubinuba/edit?html,css,js,console,output

希望可以帮到你 :)

(function(i){
    oLi[i].onclick=function(){
        for(var j=0;j<oLi.length;j++){
            oLi[j].className="";
        }
        this.className="active";
    }
})(i);

因为你里面的循环用的变量也叫i

你把 onclick 函数里面的for循环里的变量 i 改成 j 就好了, ES5中js的for循环没有
作用域,这里的i和j相当于onload函数里面的全局变量,我在jsbin里面改好了, 你可以看看是不是这个效果:http://jsbin.com/cixeli/edit?html,css,js,console,output

给个建议,如果遇到类似的问题,最好可以在jsBin里面重现,方便大家帮你看。


补充,感谢 @小_秦@li305263 函数里面用i是没问题的,每个函数有自己的作用域,我修改了答案,两个i不会相互干扰的,至于楼主到底哪里错了,我真心没看出来,看看会不会是样式的问题。

新的jsbin:http://jsbin.com/cixeli/edit?html,css,js,console,output

宣传栏