JS实现的简单标签切换功能完整示例

本文实例讲述了射流研究…实现的简单标签切换功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net选项卡切换/title style * { padd : 0；margin : 0 } body { font-size : 12px } ul、li、ol { list-style : none } a { text-decision : none } .clearfix { clear:两者；飞越：隐藏}。tab_title ul li {左侧浮动：padd : 0 10px }/style/headdydiv id=' Tab 1 ' class=' Tab clear fix ' div class=' Tab _ title clear fix ' ul lia target=' _ self ' href=' # ' external nofollow ' rel=' external nofollow ' on mouseover=' SetTab '(one，1，3)id=' one ' 1 ' TAB1/a/Li lia target=' _ self ' href=' # rel=' external no follow ' rel=' external ' rel=' external con _ one _ 1/div style=' display : none； id=' con _ one _ 2 ' con _ one _ 2/div div style=' display : none；id=' con _ one _ 3 ' con _ one _ 3/div/div脚本类型=' text/JavaScript '/tab切换效果函数setTab(name，cursel，n){ for(var I=1；I=n；I){ var menu=document。getelementbyid(名称(一)；var con=文档。getelementbyid(' con _ ' name ' _ ' I)；menu.className=i==cursel '？cur ' :con.style.display=i==cursel '？block ' : ' none} }/脚本/正文/html运行结果：

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

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。