JS实现的tab切换并显示相应内容模块功能示例

2024-05-06 16:53:59

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现的tab切换并显示相应内容模块功能。分享给大家供大家参考，具体如下：

思路：一层循环遍历操作的元素并获取当前遍历到的元素的下标，通过下标去选择显示对应的内容模块。

二层循环将元素恢复操作前的状态。

var fbUls =document.getElementById("oUl");var fbLis = fbUls.getElementsByTagName("li");var aDivs = document.getElementsByClassName("theDiv");for(var i = 0,val=fbLis.length;i<val;i++){ fbLis[i].index = i; //存放当前元素的下标 fbLis[i].onclick = function(){  for(var j=0; j< fbLis.length; j++){   fbLis[j].className="";   aDivs[j].style.display = "none";  }  //给当前点击的元素添加活跃标记  this.className="liactive";  //显示对应的模块内容  aDivs[this.index].style.display = "block"; };}

<div> <ul id="oUl">  <li class="liactive">首页</li>  <li>产品</li>  <li>合作</li> </ul></div><div class="theDiv" id="oDiv1" style="display:block;">首页模块内容：这是首页</div><div class="theDiv" id="oDiv2">产品模块内容：这是产品</div><div class="theDiv" id="oDiv3">合作模块内容：这是合作</div>

JS,tab,内容模块