推薦三種簡潔的Tab導航（網頁選項卡）簡析

div id="tabs0"> 
ul class="menu0" id="menu0"> 
  li onclick="setTab(0,0)" class="hover">新聞/li> 
  li onclick="setTab(0,1)">評論/li> 
  li onclick="setTab(0,2)">技術/li> 
  li onclick="setTab(0,3)">點評/li> 
/ul> 
div class="main" id="main0"> 
  ul class="block">li>新聞列表/li>/ul> 
  ul>li>評論列表/li>/ul> 
  ul>li>技術列表/li>/ul> 
  ul>li>點評列表/li>/ul> 
/div> 
/div> 

div id="tabs1"> 
div class="menu1box"> 
  ul id="menu1"> 
   li class="hover" onmouseover="setTab(1,0)">a href="#">新聞/a>/li> 
   li onmouseover="setTab(1,1)">a href="#">評論/a>/li> 
   li onmouseover="setTab(1,2)">a href="#">技術/a>/li> 
   li onmouseover="setTab(1,3)">a href="#">點評/a>/li> 
  /ul> 
/div> 
div class="main1box"> 
  div class="main" id="main1"> 
   ul class="block">li>新聞列表/li>/ul> 
   ul>li>評論列表/li>/ul> 
   ul>li>技術列表/li>/ul> 
   ul>li>點評列表/li>/ul> 
  /div> 
/div> 
/div> 

function setTab(m,n){ 
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*獲取選項卡的LI對象*/ 
var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*獲取主顯示區(qū)域對象*/ 
for(i=0;itli.length;i++){ 
  tli[i].className=i==n?"hover":""; /*更改選項卡的LI對象的樣式，如果是選定的項則使用.hover樣式*/ 
  mli[i].style.display=i==n?"block":"none"; /*確定主區(qū)域顯示哪一個對象*/ 
} 
} 

div id="tabs2"> 
div class="menu2box"> 
  div id="tip2">/div> 
  ul id="menu2"> 
   li class="hover" onmouseover="nowtab(2,0)">a href="#">新聞/a>/li> 
   li onmouseover="nowtab(2,1)">a href="#">評論/a>/li> 
   li onmouseover="nowtab(2,2)">a href="#">技術/a>/li> 
   li onmouseover="nowtab(2,3)">a href="#">點評/a>/li> 
  /ul> 
/div> 
  div class="main" id="main2"> 
新聞內容 
/div> 
/div>