您的位置：首页 > Web前端 > JavaScript

JavaScript实现tab标签-解决循环bug问题

2016-10-28 19:52 393 查看

用JavaScript实现tab标签当我们用循环实现每个tab标签点击效果的时候会发现循环bug，每个i输出都是循环的最终结果而不是每一个循环中的数值

解决方法有两个

第一种方法是给DOM节点添加_index属性，属性值等于索引i

简单代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="tab">
<ul class="tab-menuWrapper" id="tab-menuWrapper">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<div class="tab-contentWrapper" id="tab-contentWrapper">
<div>content1</div>
<div style="display:none;">content2</div>
<div style="display:none;">content3</div>
<div style="display:none;">content4</div>
</div>
</div>
<script>
var tabMenu=document.getElementById("tab-menuWrapper").getElementsByTagName("li");
var tabContent=document.getElementById("tab-contentWrapper").getElementsByTagName("div");
for(var i=0;i<tabMenu.length;i++){
tabMenu[i]._index=i;
tabMenu[i].onclick= function () {
for(var j=0;j<tabContent.length;j++){
tabContent[j].style.display="none";
}
tabContent[this._index].style.display="block";
}
}
</script>
</body>
</html>

一个是闭包：

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="tab">
<ul class="tab-menuWrapper" id="tab-menuWrapper">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<div class="tab-contentWrapper" id="tab-contentWrapper">
<div>content1</div>
<div style="display:none;">content2</div>
<div style="display:none;">content3</div>
<div style="display:none;">content4</div>
</div>
</div>
<script>
var tabMenu=document.getElementById("tab-menuWrapper").getElementsByTagName("li");
var tabContent=document.getElementById("tab-contentWrapper").getElementsByTagName("div");
for(var i=0;i<tabMenu.length;i++){
(function (i) {
tabMenu[i].onclick= function () {
for(var j=0;j<tabContent.length;j++){
tabContent[j].style.display="none";
}
tabContent[i].style.display="block";
}
})(i);
}
</script>
</body>
</html>

内容整理来自于《编写高质量代码-web前端开发修炼之道》

这本书对于提高自己日常的前端代码编写规范和质量挺有帮助的，推荐

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端

相关文章推荐

新的分享

章节导航