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 相关文章推荐
iframe 异步加载技术及性能分析
Jul 19 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
微信jssdk用法汇总
Jul 16 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
vue实现分页栏效果
Jun 28 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数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
aspx中利用js实现确认删除代码
2010/07/22 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
nodejs初始化init的示例代码
2018/10/10 NodeJs
JS实现图片拖拽交换效果
2018/11/30 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
python如何获取服务器硬件信息
2017/05/11 Python
Python中new方法的详解
2019/01/15 Python
Python当中的array数组对象实例详解
2019/06/12 Python
django配置app中的静态文件步骤
2020/03/27 Python
关于运动会的稿件
2014/02/02 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
2015年安全生产责任书
2015/01/30 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书