phpstudy集成环境

 首页 > javascript的添加样式问题

javascript的添加样式问题

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

下面是JS代码

下面是HTML代码

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

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

先不说别的，你的这种编程方式就有很大问题。
你在循环里面不停的创建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

希望可以帮到你 :)

你把 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

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

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

http://.com/a/1190000000471569

@hjzheng @sz101 @代码宇宙

楼主提供的代码是正确的, 是可以正确标亮的, 而他点了之后看不到效果, 是因为他的是一个 超连接, 点了之后, 就跳走了, 而跳走之后的页面, 并没有根据当前页将内容标亮的功能, 所以他才会觉得他写的代码没有效果.
而不是因为 变量i 的事.

证明: 在 onclick 里增加 return false; 阻止跳转, 就可以看到效果了.

但是这样之后, 只标亮, 不跳走肯定是不正确的.

所以, 正确的做法是: 这个标亮的功能并不是在 click 的时候进行的, 而是在页面加载的时候进行的.

基本的思路是: 在页面加载的的过程中, 根据当前的URL地址(location.href), 然后遍历这个 menu 中的
所有连接, 检测当前的页面是哪个, 找到匹配的那个, 然后给这个增加active样式.

完整代码:


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
<style>
.active {
    color: red;
}
</style>
<ul id="tab2">
    <li><a href="index.html">首页</a></li>
    <li><a href="news.html">新闻</a></li>
    <li><a href="about.html">关于</a></li>
    <li><a href="job.html">工作</a></li>
    <li><a href="ad.html">广告</a></li>
    <li><a href="contactus.html">联系我们</a></li>
</ul>
<script>
//这里的js, 可以做为一个外部的JS文件, 然后由上面这些页面统一引入即可.
(function(){
    var tDiv = document.getElementById("tab2"),
        links = tDiv.getElementsByTagName("a"),
        index = 0,//默认第一个菜单项
        url = location.href.split('?')[0].split('/').pop();//取当前URL最后一个 / 后面的文件名

    if(url){//如果有取到, 则进行匹配, 否则默认为首页(即index的值所指向的那个)
        for (var i=links.length; i--;) {//遍历 menu 的中连接地址
            if(links[i].href.indexOf(url) !== -1){
                index = i;
                break;
            }
        }
    }

    links[index].className = 'active';
})();
</script>
 </body>
</html>

演示网址(不保证长期有效):
https://xqin.net/temp/menu/

http://jsfiddle.net/zguangyu/efs71oLj/4/

【热门文章】
【热门文章】