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 delete操作符应用实例
Jan 13 Javascript
jquery maxlength使用说明
Sep 09 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
webpack4简单入门实例
Sep 06 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
JS实现瀑布流效果
Mar 07 Javascript
vue动态设置页面title的方法实例
Aug 23 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模板,主要想体现一下思路
2006/12/25 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
Python中文字符串截取问题
2015/06/15 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
荷兰本土平价百货:HEMA
2017/10/23 全球购物
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
学校经典推荐信
2013/10/30 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
小石潭记导游词
2015/02/03 职场文书
同事欢送会致辞
2015/07/31 职场文书