这篇文章主要介绍了JS实现的tab切换并显示相应内容模块功能,结合实例形式分析了JavaScript基于事件响应、元素遍历实现页面tab切换功能相关操作技巧,需要的朋友可以参考下
本文实例讲述了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> <li>首页</li> <li>产品</li> <li>合作</li> </ul> </div> <div>首页模块内容：这是首页</div> <div>产品模块内容：这是产品</div> <div>合作模块内容：这是合作</div>
<!-- 效果 -->
感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章: