高亮当前栏目，自动显示下级栏目帝国cms

帝国论坛 → 帝国网站管理系统交流区 → 模板/标签/插件共享交流 → 高亮当前栏目，自动显示下级栏目

帝国CMS5.0正式版发布	中客:空间产品随时可无条件退款！	测试：生成20万数据共用107分钟	《帝国下载系统》全面免费
Mysql大数据备份工具下载	帝国软件旗下新站 - 站长工具	1G双线帝国空间+200M数据库=158	帝国CMS教程下载

sanet
用户头衔：书生

精华贴   ：0
发贴数   ：41
经验值   ：145
注册时间：2008-01-15

信息

搜索

好友

发送悄悄话

【《帝国网站管理系统》基础教程下载】 [第 1 楼]

高亮当前栏目，自动显示下级栏目

我是菜鸟，好不容易整出这个效果，肯定不算好，写出来给大家看看。
如题，也就是TAB菜单效果：(仅用于导航部分）

　要加入的JS代码：

<script>

</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;

}

上传以下图片：