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 03 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 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
pw的一个放后门的方法分析
2007/10/08 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
javascript json2 使用方法
2010/03/16 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
js实现3D旋转相册
2020/08/02 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
Python中的生成器和yield详细介绍
2015/01/09 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
浅谈django orm 优化
2018/08/18 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
公司活动方案范文
2014/03/06 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
承诺书怎么写
2014/03/26 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
教师读书活动总结
2014/05/07 职场文书
经销商年会策划方案
2014/05/29 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
基于python实现银行管理系统
2021/04/20 Python