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

来源：互联网发布：伍聚网络股票编辑：程序博客网时间：2024/06/04 21:16

用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前端开发修炼之道》

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

0 0