今天帮美女做了一个JS控制的标签导航。呵。呵，顺便补充到我的BLOG里。让大家能在用到的时候看看

看图

 图1

 图二

鼠标放标签上就背景变白色：

很简单。看下文件：：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tabs1{
text-align:left;
width:400px;
}
.menu1box{
position:relative;
overflow:hidden;
height:42px;/*此处为按钮这一排总高度，这个根据图片高来设置*/
width:800px;/*此处为按钮这一排总宽度，根据按钮个数来设置*/
text-align:left;
}
#menu1{
position:absolute;
top:0;
left:0;
z-index:1;

}
#menu1 li{
background:url(life_tab.gif);/*修改过，正常打开页面鼠标不经过背景为life_tab.gif*/
float:left;
display:block;
cursor:pointer;
width:131px;/*背景图片宽*/
margin-left:10px;/*两个标签之间的空隙*/
height:42px;/*背景图片高*/

}
#menu1 li.hover{
background:url(life_tab_s.gif); /*修改过的地方，这里意思为鼠标经过就变背景*/
border-top:1px solid #fff; /*修改过的地方，去掉左右两个边框，只留一个顶边框*/

}
.main1box{
clear:both;
margin-top:-1px;
border:1px solid #333;
height:181px;
width:800px;
}
#main1 ul{
display: none;
}
#main1 ul.block{
display: block;
}

</style>
<script language="javascript" type="text/javascript">
function setTab(m,n){
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>
</head>

<body>
<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
   <li class="hover" href="#"></a></li>
   <li href="#"></a></li>

</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
   <ul class="block"><li>新闻列表</li></ul>
   <ul><li>评论列表</li></ul>
</div>
</div>
</div>
</body>
</html>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

完整文件如下，如有疑问，E-MAIL我哦