JS实现的tab切换并显示相应内容模块功能示例
2019-08-03 10:13
1156 查看
本文实例讲述了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>
<!-- 效果 -->
感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- js实现tab页面不同内容切换显示
- JS简单实现tab切换效果的多窗口显示功能
- JS实现的简单tab切换功能完整示例
- JS简单实现tab切换效果的多窗口显示功能
- JS实现的tab切换选项卡效果示例
- 用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式改动提交相应的那一行的改动内容。
- 同一页面tab切换对应显示内容分页实现
- JS实现指定区域的全屏显示功能示例
- JS实现的按钮点击颜色切换功能示例
- JS实现的简单标签点击切换功能示例
- JS基于myFocus库实现各种功能的tab选项卡切换效果
- 纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
- 使用JS实现导航切换时高亮显示的示例讲解
- JS实现密码框的显示密码和隐藏密码功能示例
- JS实现的简单图片切换功能示例【测试可用】
- 【js实例】js实现点击标题标签切换显示对应内容
- js + css实现标签内容切换功能(实例讲解)
- JS 实现 Tab标签切换功能
- vue.js使用v-if实现显示与隐藏功能示例
- js实现选项卡切换显示对应内容,按钮切换页面内容