当前位置:源码库-建站教程-网站开发-JavaScript/Ajax教程-JS实现的tab切换并显示相应内容模块功能示例

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

文章TAG:JS Tab 内容模块
时间:2019-08-03来源/作者:sennyla 编辑:源码库 文章热度:

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

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

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

<!--- JS -->

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";
 };
}

<!-- HTML -->

<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,内容模块

希望本文所述对大家JavaScript程序设计有所帮助。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
相关JavaScript/Ajax教程
热门标签

JavaScript/Ajax教程Rss订阅JavaScript/Ajax教程搜索