首頁 > 開發者 > JavaScript
js實現的Easy Tabs選項卡用法執行個體，easytabs
本文執行個體講述了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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
