本文实例讲述了JS实现的选项卡切换并显示相应内容模块功能。分享给大家供大家参考,具体如下:
<>强思路:一层循环遍历操作的元素并获取当前遍历到的元素的下标,通过下标去选择显示对应的内容模块。
二层循环将元素恢复操作前的状态。
& lt; !- - - JS -在
var fbUls=. getelementbyid (“oUl”);
var fbLis=fbUls.getElementsByTagName(“李”);
var aDivs=document.getElementsByClassName (“theDiv”);
(var=0, val=fbLis.length; i
& lt; div>
& lt; ul id=皁Ul”比;
& lt;李类=" liactive "祝辞首页& lt;/li>
& lt; li>产品& lt;/li>
& lt; li>合作& lt;/li>
& lt;/ul>
& lt;/div>
& lt; div类=" theDiv " id=" oDiv1祝辞首页模块内容:这是首页& lt;/div>
& lt; div类=" theDiv " id=" oDiv2祝辞产品模块内容:这是产品& lt;/div>
& lt; div类=" theDiv " id=皁Div3”在合作模块内容:这是合作& lt;/div>
之前
& lt; !——效果,在
感兴趣的朋友可以使用:http://tools.jb51.net/code/WebCodeRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》,《JavaScript遍历算法与技巧总结》,《JavaScript查找算法技巧总结》,《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
