javascript简单实现选项卡

javascript简单实现选项卡

JS：

<script type="text/javascript">
<!--
function setTab(name,cursel,n)
{
for(i=1;i<=n;i++)
{
var menu=document.getElementById(name+i);
if(menu)
{
var con=document.getElementById("con_"+name+"_"+i);
menu.className= i==cursel?"hover":"";
con.style.display= i==cursel?"block":"none";
}
}
}
//-->
</script>

HTML:

<div id="menus">
<ul id="menu_navs">
<!--{loop $_G['setting']['u'] $nav}-->
<LI id="navsx{$nav['i']}" onMouseOver="setTab('navsx',{$nav['i']},15)"><A id=wanggouhuisuo href="$nav[url]" target="_blank" >$nav[name]</A></LI>
<LI></LI>
<!--{/loop}-->

</ul>

<div id="menu_cons">
<div>
<ul>
<li>
<span style="float: left; line-height: 22px; color: rgb(244, 116, 35); margin-left: 12px;">推荐栏：</span>
<!--{loop $_G['setting']['u1'] $k $nav1}-->

<!--{if $nav1[val] == 1}-->
<UL style="DISPLAY: block" id="con_navsx_$nav1[val]">
<!--{else}-->
<UL style="DISPLAY: none" id="con_navsx_$nav1[val]">
<!--{/if}-->
<!--{loop  $nav1[uk]  $nav2}-->
<LI><A href="<!--{$nav2[url]}-->"  target=_blank><SPAN><!--{$nav2[name]}--></SPAN></A> </LI>

<!--{/loop}-->
</UL>
<!--{/loop}-->
</li>
</ul>
</div>
</div>
</div>