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

更新时间：2019年08月03日 10:13:22 作者：sennyla

这篇文章主要介绍了JS实现的tab切换并显示相应内容模块功能,结合实例形式分析了JavaScript基于事件响应、元素遍历实现页面tab切换功能相关操作技巧,需要的朋友可以参考下

本文实例讲述了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>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

JS
tab切换

webpack-dev-server搭建本地服务器的实现
当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，我们希望本地能搭建一个服务器，本文就介绍如何使用webpack-dev-server搭建本地服务器，感兴趣的可以了解一下
2021-07-07
js 阻止子元素响应父元素的onmouseout事件具体实现
本文为大家介绍下js阻止子元素响应父元素的onmouseout事件，具体实现如下，感兴趣的朋友可以参考下
2013-12-12
IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法
IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法，需要的朋友可以参考下。
2011-04-04
鼠标悬浮在树组件节点上展示当前节点名称的三种实现方式
这篇文章主要介绍了鼠标悬浮在树组件节点上展示当前节点名称的三种实现方式,第一种是使用css样式设置,第二种在checkBox绑定,第三种使用tooltip,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-12-12
JavaScript 报表展示实现代码
以下是从网上找到的一段JavaScript实现图形报表的代码，对于想客户端显示报表的朋友可以参考下。
2009-12-12
echarts提示框tooltip被遮挡的解决办法分享
这篇文章主要给大家介绍了关于echarts提示框tooltip被遮挡的解决办法, 在制作图表中,发现有时候tooltip会被线条遮挡或者被柱子折线遮挡,这种情况会偶尔出现,需要的朋友可以参考下
2023-08-08
一些超实用的JS常用算法详解(推荐!)
算法是计算机算法即计算机能够执行的算法,只有明确了算法后,才能使应用程序实现某些功能,所以通常人们会将算法称为程序的灵魂,下面这篇文章主要给大家分享介绍了一些超实用的JS常用算法的相关资料,需要的朋友可以参考下
2022-10-10
Javascript设计模式之发布订阅模式
发布---订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知
2022-12-12
uniapp中uni.switchTab无法传参的解决办法
uni.switchTab跳转的必须是TabBar上的路径,下面这篇文章主要给大家介绍了关于uniapp中uni.switchTab无法传参的解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01
关于前后端json数据的发送与接收详解
这篇文章主要给大家介绍了关于前后端json数据发送与接收的相关资料，文中通过示例代码详细介绍了关于flask中的json数据接收和前端发送json数据等内容，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-07-07