推荐三种简洁的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"); /*获取主显示区域对象*/ 
for(i=0;itli.length;i++){ 
  tli[i].className=i==n?"hover":""; /*更改选项卡的LI对象的样式，如果是选定的项则使用.hover样式*/ 
  mli[i].style.display=i==n?"block":"none"; /*确定主区域显示哪一个对象*/ 
} 
} 

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>