JS实现的选项卡切换 显示相应内容模块的功能示例

本文给出了一个用JS实现标签切换和显示相应内容模块功能的实例。分享给大家参考，如下：

Idea:第一层循环遍历操作的元素，获取当前遍历元素的下标，通过下标选择并显示对应的内容模块。

两层循环将元素恢复到操作前的状态。

！- JS -

var fbUls=document . getelementbyid(' OUl ')；var fbLis=fbuls . getelementsbytagname(' Li ')；var ADivs=document . GetElementsByclassName(' DivV ')；for(var i=0，val=fbLis.length艾瓦尔；i ){ fbLis[i]。索引=I；//存储当前元素[I]的下标fblis。onclick=function(){ for(var j=0；j fbLis.lengthj ){ fbLis[j]。className=aDivs[j]. style . display=' none '；}//将活动标记this.className=' liactive '添加到当前单击的元素中；//显示相应的模块内容adivs [this。索引]。style.display=' block};}!- HTML -

div ul id=' OUl ' Li class=' lia active '主页/Li Li产品/Li Li操作/Li/ul/div class=' the div ' id=' ODI v1 ' style=' display : block；'首页模块内容：这是首页/div div class=' dDiv ' id=' ODI v2 '产品模块内容：这是产品/div div class=' dDiv ' id=' ODI v3 '合作模块内容：这是合作/div！-效果-

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun来测试上述代码的运行效果。

关于JavaScript的更多信息，请参考本网站的主题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。