javascript - Tab切换为什么不能重置？

问题描述

问 题

HTML

  <nav>
        <ul>
            <li class="on"><a href="javascript:;" title="">前端</a></li>
            <li><a href="" title="">后端</a></li>
        </ul>
    </nav>

CSS

nav{
    width: 800px;
    height: 50px;
    border-bottom: 3px solid #f60;
}
nav ul{
    list-style: none;
}

nav li{
    width: 100px;
    height: 50px;
    line-height: 50px;
    float: left;
}
nav a{
    text-decoration: none;
    display: block;
    text-align: center;
    color: #000;
}

nav .on a{
    color: #fff;
    background: #f60;
}

JS

window.onload = function() {
    var tabs = document.getElementsByTagName('nav')[0].getElementsByTagName('a');
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].index = i;
        tabs[i].onclick = function() {
            for (var j = 0; j < tabs.length; j++) {
               // alert( tabs[j].parentNode.nodeName       );
               tabs[j].parentNode.classList.remove('on');
            }
              //   this.parentNode.classList.add('on');
        };
    }
};

这个什么情况？为什么不能重置？

解决方案

表示用lz的代码可以正常删除class，gif中样式重新出现是因为我刷了浏览器。

第二张图是加上add后的效果。

<nav>
    <ul>
        <li class="on"><a href="javascript:;" title="">前端</a></li>
        <li><a href="javascript:;" title="">后端</a></li>
    </ul>
</nav>

突然发现我改了上面这段代码中的 后端的a标签。 lz不会是没写然后刷新了页面吧。。。。。。。

这篇关于javascript - Tab切换为什么不能重置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！