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 相关文章推荐
js检测网络是否具体连接功能的代码
May 23 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
React如何避免重渲染
Apr 10 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
javascript实现滚动条效果
Mar 24 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 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
第八节 访问方式 [8]
2006/10/09 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
python模块之time模块(实例讲解)
2017/09/13 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
母亲节感恩寄语
2014/02/21 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
选秀节目策划方案
2014/06/06 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
三八妇女节致辞
2015/07/31 职场文书
小学生运动会广播
2015/08/19 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
5个实用的JavaScript新特性
2022/06/16 Javascript