javascript 导航菜单
<style media=”all” type=”text/css”>
#tabs1{text-align:left; width:800px;}
.menu1box{position:relative; overflow:hidden; height:20px;}
#menu1{position:absolute; top:0; left:2px; z-index:1; margin:0px; padding:0px; border:0px;}
#menu1 li{float:left; display:block; cursor:pointer;}
#menu1 li.hover{}
.main1box{clear:both; margin-top:-1px;}
#main1 ul{display: none; margin:0px; padding:0px; border:0px;}
#main1 ul.block{display: block; margin:0px; padding:0px; border:0px;}
/*menubox*/
</style>
<div id=”tabs1″>
<div class=”menu1box”>
<ul id=”menu1″>
<li onMouseOver=”setTab(1,0)” onMouseOut=”setTab(1,1)”><a href=”#”>0</a></li>
<li class=”hover” onMouseOver=”setTab(1,1)” onMouseOut=”setTab(1,1)”><a href=”#”>1</a></li>
<li onMouseOver=”setTab(1,2)” onMouseOut=”setTab(1,1)”><a href=”#”>2</a></li>
<li onMouseOver=”setTab(1,3)” onMouseOut=”setTab(1,1)”><a href=”#”>3</a></li>
<li onMouseOver=”setTab(1,4)” onMouseOut=”setTab(1,1)”><a href=”#”>4</a></li>
<li onMouseOver=”setTab(1,5)” onMouseOut=”setTab(1,1)”><a href=”#”>5</a></li>
<li onMouseOver=”setTab(1,6)” onMouseOut=”setTab(1,1)”><a href=”#”>6</a></li>
<li onMouseOver=”setTab(1,7)” onMouseOut=”setTab(1,1)”><a href=”#”>7</a></li>
<li onMouseOver=”setTab(1,8)” onMouseOut=”setTab(1,1)”><a href=”#”>8</a></li>
</ul>
</div>
<div class=”main1box”>
<div class=”main” id=”main1″>
<ul>
<li>0</li>
</ul>
<ul class=”block”>
<li>1</li>
</ul>
<ul>
<li>2</li>
</ul>
<ul>
<li>3</li>
</ul>
<ul>
<li>4</li>
</ul>
<ul>
<li>5</li>
</ul>
<ul>
<li>6</li>
</ul>
<ul>
<li>7</li>
</ul>
<ul>
<li>8</li>
</ul>
</div>
</div>
</div>
<script language=”javascript”>
function setTab(m,n,s){
var tli=document.getElementById(”menu”+m).getElementsByTagName(”li”); /*获取选项卡的LI对象*/
var mli=document.getElementById(”main”+m).getElementsByTagName(”ul”); /*获取主显示区域对象*/
for(i=0;i<tli.length;i++){
tli[i].className=i==n?”hover”:”"; /*更改选项卡的LI对象的样式，如果是选定的项则使用.hover样式*/
mli[i].style.display=i==n?”block”:”none”; /*确定主区域显示哪一个对象*/
}
}</script>