js实现的Easy Tabs选项卡用法实例

本文实例讲述了js实现的Easy Tabs选项卡用法。分享给大家供大家参考。具体如下：
本网页选项卡是Easy Tabs选项卡插件中的一个演示实例代码，是一个最简单的选项卡样式，稍带点动画色彩，希望大家喜欢哦。
运行效果截图如下：

在线演示地址如下：
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/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Tabs选项卡</title><style type="text/css">/*Example for a Menu Style*/.menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px; font:11px Arial, Helvetica, sans-serif;}.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}.menu li {display:inline; line-height:23px;}.menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px; border-left:1px solid #ececec; border-right:1px solid #ececec;}.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#CCCCCC; font-weight:bold; position:relative;}</style><script type="text/javascript">/*Important Function to blend the tabs in and out*/function blendoff（idname） {document.getElementById（idname）.style.display = "none";}function blendon（idname） {document.getElementById（idname）.style.display = "block";}</script><script type="text/javascript">/*Function for our Tabmenu with 4 Tabs*/function swichtabs（wert） { if （wert=="1"）{document.getElementById（"tablink1"）.className="tab1 tabactive";document.getElementById（"tablink2"）.className="tab2";document.getElementById（"tablink3"）.className="tab3";document.getElementById（"tablink4"）.className="tab4"; }else if （wert=="2"）{document.getElementById（"tablink1"）.className="tab1";document.getElementById（"tablink2"）.className="tab2 tabactive";document.getElementById（"tablink3"）.className="tab3";document.getElementById（"tablink4"）.className="tab4"; }else if （wert=="3"）{document.getElementById（"tablink1"）.className="tab1";document.getElementById（"tablink2"）.className="tab2";document.getElementById（"tablink3"）.className="tab3 tabactive";document.getElementById（"tablink4"）.className="tab4"; } else if （wert=="4"）{document.getElementById（"tablink1"）.className="tab1";document.getElementById（"tablink2"）.className="tab2";document.getElementById（"tablink3"）.className="tab3";document.getElementById（"tablink4"）.className="tab4 tabactive"; }}</script></head><body><！--Start of the Tabmenu --><div class="menu"><ul><li><a href="#" onmouseover="blendon（"tabcontent1"）; blendoff（"tabcontent2"）; blendoff（"tabcontent3"）;blendoff（"tabcontent4"）;swichtabs（"1"）;" onclick="return false;" title="" class="tabactive" id="tablink1">Tab 1 </a></li><li><a href="#" onmouseover="blendon（"tabcontent2"）; blendoff（"tabcontent1"）; blendoff（"tabcontent3"）;blendoff（"tabcontent4"）;swichtabs（"2"）;" onclick="return false;" title="" id="tablink2">Tab 2 </a></li><li><a href="#" onmouseover="blendon（"tabcontent3"）; blendoff（"tabcontent1"）; blendoff（"tabcontent2"）; blendoff（"tabcontent4"）;swichtabs（"3"）;" onclick="return false;" title=""id="tablink3">Tab 3 </a></li><li><a href="#" onmouseover="blendon（"tabcontent4"）; blendoff（"tabcontent1"）; blendoff（"tabcontent2"）;blendoff（"tabcontent3"）;swichtabs（"4"）;" onclick="return false;" title=""id="tablink4" >Tab 4 </a></li></ul></div><！--End of the Tabmenu --><！--Start Tabcontent 1 --><div style="display:block;" id="tabcontent1">Tabcontent 1</div><！--End Tabcontent 1--><！--Start Tabcontent 2--><div style="display:none;" id="tabcontent2">Tabcontent 2</div><！--End Tabcontent 2 --><！--Start Tabcontent 3--><div style="display:none;" id="tabcontent3">Tabcontent 3</div><！--End Tabcontent 3--><！--Start Tabcontent 4--><div style="display:none;" id="tabcontent4">Tabcontent 4</div><！--End Tabcontent 4--></body></html>

希望本文所述对大家的JavaScript程序设计有所帮助。