我是菜鸟，好不容易整出这个效果，肯定不算好，写出来给大家看看。
如题，也就是TAB菜单效果：(仅用于导航部分）
要加入的JS代码：
<script>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
导航条：
<div class="Menubox">
<ul>
<li id="one1" onmouseover="setTab('one',1,6)" class="hover"><a href="[!--news.url--]">首页</a></li>
<li id="one2" onmouseover="setTab('one',2,6)" ><a href="/shenghuo/" >校园生活</a></li>
<li id="one3" onmouseover="setTab('one',3,6)"><a href="/laoshizhijia/">教师之家</a></li>
<li id="one4" onmouseover="setTab('one',4,6)"><a href="/xueshengtiandi/">学生天地</a></li>
<li id="one5" onmouseover="setTab('one',5,6)"><a href="/xxjs/">信息技术</a></li>
<li id="one6" onmouseover="setTab('one',6,6)"><a href="/jiankangguwen/">健康教育</a></li>
</ul>
</div>
显示下级栏目区域：
<div class="Contentbox"> <div id="con_one_1" class="hover"><ul>[showclasstemp]'selfinfo',1,0,0[/showclasstemp]</ul></div>
<div id="con_one_2" style="display:none"><ul> [showclasstemp]32,1,0,0[/showclasstemp]</ul> </div>
<div id="con_one_3" style="display:none"><ul>[showclasstemp]42,1,0,0[/showclasstemp]</ul> </div>
<div id="con_one_4" style="display:none"><ul>[showclasstemp]36,1,0,0[/showclasstemp]</ul> </div>
<div id="con_one_5" style="display:none"><ul>[showclasstemp]45,1,0,0[/showclasstemp]</ul> </div>
<div id="con_one_6" style="display:none"><ul>[showclasstemp]50,1,0,0[/showclasstemp]</ul> </div>
</div>
css部分
.Menubox {
width:100%;
background:url(images/nav_mid.gif) repeat-x;
height:73px;
line-height:28px;
}
.Menubox ul{
margin:5px;
padding:0px;
list-style:none}
.Menubox li{
float:left;
display:block;
cursor:pointer;
width:85px;
text-align:center;
letter-spacing:3px;
}
.Contentbox ul{list-style:none;}
.Contentbox ul li{float:left;
margin:6px 15px 10px 0px;
}
.Menubox li a{text-decoration:none;
color:white;
font-weight:bold;
display:block;
}
.Menubox li.hover{
background:url('../images/nav_hover.gif') no-repeat;
}
上传以下图片：
|
顶部 
加入收藏夹
2008-04-23 14:59:14 
已设置保密
回复
引用
报告
编辑
删除
好东西
