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


Posted in Javascript onAugust 03, 2019

本文实例讲述了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切换并显示相应内容模块功能示例

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

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

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

Javascript 相关文章推荐
一些常用的Javascript函数
Dec 22 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
js控制input输入字符解析
Dec 27 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 #Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 #Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 #Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
小程序中英文混合排序问题解决
Aug 02 #Javascript
详解JWT token心得与使用实例
Aug 02 #Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 #Javascript
You might like
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python程序语言快速上手教程
2012/07/18 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
谈谈python中GUI的选择
2018/03/01 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
在django view中给form传入参数的例子
2019/07/19 Python
python实现单链表的方法示例
2019/09/03 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
资产评估专业学生的自我鉴定
2013/11/14 职场文书
会计主管岗位职责
2014/01/03 职场文书
安全标准化实施方案
2014/02/20 职场文书
初三学生评语大全
2014/04/24 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers