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 相关文章推荐
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
JavaScript ES6的函数拓展
Jan 18 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
简单JS代码压缩器
2006/10/12 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
幼儿园教师奖惩制度
2014/02/01 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
督导岗位职责
2015/02/04 职场文书
公司地址变更通知
2015/04/25 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis