利用css和js實現頁面的標籤效果
css
<style>.menu{ margin-bottom:-15px; width: 800px; } .menu li{ display:block; float: left; font-weight: bold; font-size: 12px; padding: 2px 0; width:120px; text-align: center; cursor:pointer; background: #A9A9A9; border-top:1px solid #FFFFFF; border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF;} .menu li.hover{ background: #FFFFFF; border-top:1px solid #A9A9A9; border-bottom;1px solid #A9A9A9; border-left:1px solid #A9A9A9; border-right:1px solid #A9A9A9;}#menuContent ul{ display: none; } #menuContent ul.block{ display: block; }</style>
js
說明:
這裡的初期化函數看起來比較複雜,實際上是為了動態控制顯示標籤而設計的。
當第一個標籤不顯示時,第二個標籤的初始狀態就為動作不可。
<script type="text/javascript" src="./jquery-1.8.js"></script><script>$(document).ready(function(){ iniKindTab();});function iniKindTab(){// JS操作的資料存在的情況下if(document.getElementById("mainMenu")!=null){// Tab內容的初期胡處理var dtiComShopAndWallet=document.getElementById("mainMenu").getElementsByTagName("li"); // var dliComShopAndWallet=document.getElementById("mainMenuContent").getElementsByTagName("ul"); // 有三個Tab,有的Tab可能不顯示,第一個被顯示的Tab的位置(三個Tab,索引分別為0,1,2)// 預設第一個Tab一開始就被顯示var indexShowTab = 0;var indexShowTabflg = true;for(i=0;i<dtiComShopAndWallet.length;i++){ if(indexShowTabflg){if(dtiComShopAndWallet[i].style.display!='none'){indexShowTab = i;indexShowTabflg = false;}}dtiComShopAndWallet[i].className=""; dliComShopAndWallet[i].style.display="none";} // 顯示在第一個位置的tab是不能點擊的dtiComShopAndWallet[indexShowTab].className="hover";// 顯示位置開始的Tab中向對應的內容dliComShopAndWallet[indexShowTab].style.display="block";}}function setTab(menu,index){ var menu=document.getElementById("mainMenu").getElementsByTagName("li"); var menuContent=document.getElementById("mainMenuContent").getElementsByTagName("ul"); for(i=0;i<menu.length;i++){ menu[i].className=i==index?"hover":""; menuContent[i].style.display=i==index?"block":"none"; } }</script>
HTML
<div id="tabs1"> <ul class="menu" id="mainMenu"> <li onclick="setTab(mainMenu,0)" class="hover">Tab1</li><li onclick="setTab(mainMenu,1)" class="hover">Tab2</li><li onclick="setTab(mainMenu,2)" class="hover">Tab3</li><li onclick="setTab(mainMenu,3)" class="hover">Tab4</li><li onclick="setTab(mainMenu,4)" class="hover">Tab5</li></ul><BR><BR><div class="menuContent " id="mainMenuContent"><ul>標籤1中的內容</ul><ul>標籤2中的內容</ul><ul>標籤3中的內容</ul><ul>標籤4中的內容</ul><ul>標籤5中的內容</ul></div></div>
通過以上代碼實現。
總結:
通過這種方式實現的好處是標籤的個數可以動態變化。