用js写了一个简单的tab栏原理demo，但一运行就卡死浏览器。
火狐和谷歌都卡死。
代码如下：
<style>
.box {
width: 400px;
margin: 100px auto 10px auto;
}
.bottom div{
width: 400px;
height: 290px;
background-color: red;
margin: 0 auto;
display: none;
}
.bottom div:first-child {
display: block;
}
.btnbg {
background-color: pink;
}
</style>
<script>
window.onload=function(){
var btns = document.getElementsByTagName("button");
var divs = document.getElementById("divs");
for(var i=0;i<btns.length;i++){
btns[i].index = i;
btns[i].onclick = function(){
for(var j=0;j<btns.length;j++){
btns[j].className = "";
}
this.className = "btnbg";
}
for(var i=0;i<divs.length;i++){
divs[i].style.display = "none";
divs[this.index].style.display = "block";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="top">
<button>第一个</button>
<button>第二个</button>
<button>第三个</button>
<button>第四个</button>
<button>第五个</button>
</div>
<div class="bottom" id="divs">
<div>第一个盒子</div>
<div>第二个盒子</div>
<div>第三个盒子</div>
<div>第四个盒子</div>
<div>第五个盒子</div>
</div>
</div>
</body>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
注意这两行代码：
由于不是
let，所以并没有块级作用域，于是乎外层循环和内层循环其实用的同一个i，而你那个divs只是一个元素，并不是集合，所以length属性为undefined，所以内层循环每次都把i重置了，于是乎死循环了，于是乎卡死了。把for放在click里面试试
两个for循环, 里面的for重置了i
看一下jquery，其实没必要用到两个for