js实现的简易选项卡使用示例

本文说明了js实现的简易标签页的用法。分享给大家参考。具体如下：

此网页选项卡是简易选项卡插件中的演示示例代码。这是最简单的选项卡样式，带有一点动画颜色。希望你喜欢。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-Easy-Tabs-cha-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleTabs选项卡/title Style type=' text/CSS '/*菜单样式示例*/。菜单{底色： # ECE CECcolor : # 272727 border-bottom :1 px实心# d7d 7；Helvetica阿里亚尔公司，无衬线；}.菜单ul { margin :0 pxpadding :0 pxlist-style : none；文本对齐：居中；}.菜单li { display:inline线高：23 px}.菜单阿利{ color: # 000000文本装饰：无；padding:4px 5px 6px 5px边框-左侧：1px实心# ecececoborder-right :1 px实心# ececec}。菜单阿利.塔巴活跃{边框-左：1 px实心# d7d 7；右边框：1px实心# d7d 7；背景色： # CCCCCC；字体粗细：加粗；位置：相对；}/style脚本类型=' text/JavaScript '/*重要功能混合选项卡的输入和输出*/Function blendof(idname){ document。getelementbyid(idname)。风格。显示='无'；}函数blendon(idname){ document。getelementbyid(idname。风格。display=' block}/script脚本类型=' text/JavaScript '/*我们的带有四个标签的Tabmenu的函数*/函数swichtabs(wert){ if(wert==' 1 '){ document。getelementbyid(' tablink 1 ').tab1 tabactivedocument .getelementbyid(' tablink 2 ').' tab2document。getelementbyid(' tablink 3 ').tab3document .getelementbyid(' tablink 4 ').tab 4)else if(wert==' 2 '){ document。getelementbyid(' tablink 1 ').标签1文档。getelementbyid(' tablink 2 ').tab2 tabactivedocument .getelementbyid(' tablink 3 ').tab3document .getelementbyid(' tablink 4 ').tab 4)else if(wert==' 3 '){ document。getelementbyid(' tablink 1 ').标签1文档。getelementbyid(' tablink 2 ').' tab2document。getelementbyid(' tablink 3 ').tab3 tabactivedocument .getelementbyid(' tablink 4 ').tab 4)else if(wert==' 4 '){ document。getelementbyid(' tablink 1 ').标签1文档。getelementbyid(' tablink 2 ').' tab2document。getelementbyid(' tablink 3 ').tab3document .getelementbyid(' tablink 4 ').class name=' tab 4 Taba active } }/脚本/床头！-Tabmenu-div类的开始=' menu ' ullia href=' # ' onmouseover=' blendon '(' Tabcontent 1 ')；blendoff('标签内容2 ')；blendoff('标签内容3 ')；blendoff('标签内容4 ')；swichtabs(' 1 ')；onclick='返回false title=' class=' Taba active ' id=' tablink 1 ' Tab 1/a/lilia href=' # ' onmouseover=' blendon '(' Tabcontent 2 ')；blendoff('标签内容1 ')；blendoff('标签内容3 ')；blendoff('标签内容4 ')；swichtabs(' 2 ')；onclick='返回false title=' id=' tablink 2 ' Tab 2/a/lilia href=' # ' onmouseover=' blendon '(' Tabcontent 3 ')；blendoff('标签内容1 ')；blendoff('标签内容2 ')；blendoff('标签内容4 ')；swichtabs(' 3 ')；onclick='返回false title=' id=' tablink 3 ' Tab 3/a/lilia href=' # ' onmouseover=' blendon '(' Tabcontent 4 ')；blendoff('标签内容1 ')；blendoff('标签内容2 ')；blendoff('标签内容3 ')；swichtabs(' 4 ')；onclick='返回false title=' id=' tablink 4 ' Tab 4/a/Li/ul/div！Tabmenu结束-!-Start Tabcontent 1-div style=' display :块；id='选项卡内容1 '选项卡内容1/div！- End Tabcontent 1 -！-Start Tabcontent 2-div style=' display : none；id='选项卡内容2 '选项卡内容2/div！- End Tabcontent 2 -！-Start Tabcontent 3-div style=' display : none；id='选项卡内容3 '选项卡内容3/div！- End Tabcontent 3 -！-Start Tabcontent 4-div style=' display : none；id='选项卡内容4 '选项卡内容4/div！- End Tabcontent 4 - /body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。