div id="tabs0"> ul class="menu0" id="menu0"> li onclick="setTab(0,0)" class="hover">新聞/li> li onclick="setTab(0,1)">評(píng)論/li> li onclick="setTab(0,2)">技術(shù)/li> li onclick="setTab(0,3)">點(diǎn)評(píng)/li> /ul> div class="main" id="main0"> ul class="block">li>新聞列表/li>/ul> ul>li>評(píng)論列表/li>/ul> ul>li>技術(shù)列表/li>/ul> ul>li>點(diǎn)評(píng)列表/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="#">評(píng)論/a>/li> li onmouseover="setTab(1,2)">a href="#">技術(shù)/a>/li> li onmouseover="setTab(1,3)">a href="#">點(diǎn)評(píng)/a>/li> /ul> /div> div class="main1box"> div class="main" id="main1"> ul class="block">li>新聞列表/li>/ul> ul>li>評(píng)論列表/li>/ul> ul>li>技術(shù)列表/li>/ul> ul>li>點(diǎn)評(píng)列表/li>/ul> /div> /div> /div>
第一、二種形式的JS代碼:
復(fù)制代碼 代碼如下:
function setTab(m,n){ var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*獲取選項(xiàng)卡的LI對(duì)象*/ var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*獲取主顯示區(qū)域?qū)ο?/ for(i=0;itli.length;i++){ tli[i].className=i==n?"hover":""; /*更改選項(xiàng)卡的LI對(duì)象的樣式，如果是選定的項(xiàng)則使用.hover樣式*/ mli[i].style.display=i==n?"block":"none"; /*確定主區(qū)域顯示哪一個(gè)對(duì)象*/ } }
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="#">評(píng)論/a>/li> li onmouseover="nowtab(2,2)">a href="#">技術(shù)/a>/li> li onmouseover="nowtab(2,3)">a href="#">點(diǎn)評(píng)/a>/li> /ul> /div> div class="main" id="main2"> 新聞內(nèi)容 /div> /div>
