Tab切换为什么不能重置？

Question

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

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

Answer 1

表示用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不会是没写然后刷新了页面吧。。。。。。。

Tab切换为什么不能重置？

解决方案