通用水平二级菜单
<!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">
<!--
body{margin:0px;padding:0px;font-size:14px;}
ul{list-style-type:none;}
a{text-decoration:none;}
/*--------*/
.width950{width:950px;margin:10px auto 0;padding:0;border:1px solid #333333;}
.scrollUl{width:950px;margin:0;padding:0;float:left;background-color:#333333;}
.scrollUl li{float:left;}
.scrollUl a{padding:0 1em;line-height:2em;dislay:block;color:#fff;}
.st01{background:#fff;}
.st01 a{color:#333333;}
.clear{clear:both;}
.hidden{display:none;}
.bor03{width:950px;margin:0;padding:0;}
.bor03 ul{width:950px;float:left;margin:0;padding:0;background-color:#FFFFFF;}
.bor03 li{float:left;}
.bor03 a{padding:0 1em;line-height:2em;color:#333333;}
.bor03 a:hover{text-decoration:underline;}
-->
</style>
<script type="text/javascript">
/*
穿皮鞋的青蛙
qq:66118181
msn:accord1104@hotmail.com
http://www.jsweb8.cn/JS特效学院欢迎光临
*/
function switchmodTag(){
}
switchmodTag.prototype = {
st : function(menus,divs,openClass,closeClass){
var _this = this;
if(menus.length != divs.length)
{
alert("菜单层数量和内容层数量不一样!");
return false;
}
for(var i = 0 ; i < menus.length ; i++)
{
_this.$(menus[i]).value = i;
_this.$(menus[i]).onmouseover = function(){//如果想把效果变成点击切换，将此行onmouseover 改成onclick即可。
for(var j = 0 ; j < menus.length ; j++)
{
_this.$(menus[j]).className = closeClass;
_this.$(divs[j]).style.display = "none";
}
_this.$(menus[this.value]).className = openClass;
_this.$(divs[this.value]).style.display = "block";
}
}
},
$ : function(oid){
if(typeof(oid) == "string")
return document.getElementById(oid);
return oid;
}
}
window.onload = function(){
var STmodel = new switchmodTag();
STmodel.st(["a_1","a_2","a_3","a_4","a_5"],["c1_1","c1_2","c1_3","c1_4","c1_5"],"st01","st02");//第一组动滑轮
STmodel.st(["b_1","b_2","b_3","b_4","b_5"],["c2_1","c2_2","c2_3","c2_4","c2_5"],"st01","st02");//第二组动滑轮
STmodel.st(["c_1","c_2","c_3","c_4","c_5"],["c3_1","c3_2","c3_3","c3_4","c3_5"],"st01","st02");//第三组动滑轮
STmodel.st(["d_1","d_2","d_3","d_4","d_5"],["c4_1","c4_2","c4_3","c4_4","c4_5"],"st01","st02");//第四组动滑轮
//如需增加滑动门个数，请复制代码，ID命名规则如上即可。
}
</script>
</head>
<body>
<div class="width950">
<ul class="scrollUl">
<li class="st01" id="a_1"><a href="http://www.jsweb8.cn">新闻</a></li>
<li class="st02" id="a_2"><a href="http://www.jsweb8.cn">财经</a></li>
<li class="st02" id="a_3"><a href="http://www.jsweb8.cn">娱乐</a></li>
<li class="st02" id="a_4"><a href="http://www.jsweb8.cn">军事</a></li>
<li class="st02" id="a_5"><a href="http://www.jsweb8.cn">生活</a></li>
</ul><div class="clear"></div>
<div class="bor03 cont">
<ul id="c1_1">
<li><a href="#">新闻1</a></li>
<li><a href="#">新闻2</a></li>
</ul>
<ul id="c1_2" class="hidden">
<li><a href="#">财经1</a></li>
<li><a href="#">财经2</a></li>
</ul>
<ul id="c1_3" class="hidden">
<li><a href="#">娱乐1</a></li>
<li><a href="#">娱乐2</a></li>
</ul>
<ul id="c1_4" class="hidden">
<li><a href="#">军事1</a></li>
<li><a href="#">军事2</a></li>
</ul>
<ul id="c1_5" class="hidden">
<li><a href="#">生活1</a></li>
<li><a href="#">生活2</a></li>
</ul><div class="clear"></div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号