javascript - 用js写了一个简单的tab栏原理demo，但一运行就卡死浏览器。
本文介绍了javascript - 用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>解决方案
注意这两行代码：
for(var i=0;i<btns.length;i++){
...
for(var i=0;i<divs.length;i++){由于不是 let，所以并没有块级作用域，于是乎外层循环和内层循环其实用的同一个 i，而你那个 divs 只是一个元素，并不是集合，所以 length 属性为 undefined，所以内层循环每次都把 i 重置了，于是乎死循环了，于是乎卡死了。
这篇关于javascript - 用js写了一个简单的tab栏原理demo，但一运行就卡死浏览器。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
