利用css和js實現頁面的標籤效果。(標籤個數可以動態變化)

利用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>

通過以上代碼實現。

總結：

通過這種方式實現的好處是標籤的個數可以動態變化。