JS+CSS多个滑动门重复调用封闭类

答案：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>封装的通用滑动门-</title>
<style type="text/css">
<!--
body{margin:0px;padding:0px;font-size:12px;line-height:20px;}
.block{width:760px;margin:20px auto auto;border:#ccc dotted 8px;}	
h5{ font-size:12px; color:#000; font-weight:normal}
.t_rt{text-align:right;}
ul,li{margin:0px;padding:0px;list-style-type:none;}
.preview{margin:10px;padding:10px;overflow:hidden}
.cont{padding:10px;}
.cls{clear:both;}
.hidden{display:none;}
#sourse{border:1px dotted #DEFAE6;width:600px;height:300px;margin:0px auto;}
.textDiv{margin:10px 40px 10px;text-align:center;}
.example{margin:10px;background:#FFF;border:1px dotted #ADDA9C;padding:10px;}
.scrolldoorFrame{width:400px;margin:0px auto;overflow:hidden;border:1px solid #ADDA9C}
.scrollUl{width:400px;overflow:hidden;height:23px; border-bottom:#ADDA9C solid 1px}
.scrollUl li{float:left}
.bor03{border-top-width:0px;}
.st01{cursor:pointer;background:#f00;font-weight:bold; width:90px; text-align:center; color:#fff; height:23px; line-height:23px}
.st01 a{ color:#fff; text-decoration:none}
.st02{cursor:pointer;width:50px;text-align:center;height:23px; line-height:23px}
-->
</style>
<script type="text/javascript">
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(["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>
	<h5>一.将JS标记行onmouseover 改成onclick即可变为点击切换</h5>
	<h5>二.如果想增加，请查看JS代码中做标记的地方，ID命名规则如上即可</h5>
	<div class="preview">
		<div class="scrolldoorFrame">
			<ul class="scrollUl">
				<li class="st01" id="a_1">新闻</li>
				<li class="st02" id="a_2">财经</li>
				<li class="st02" id="a_3">娱乐</li>
				<li class="st02" id="a_4">军事</li>
				<li class="st02" id="a_5">生活</li>
			</ul>
			<div class="bor03 cont">
				<div id="c1_1">
					新闻
				</div>
				<div id="c1_2" class="hidden">
					财经
				</div>
				<div id="c1_3" class="hidden">
					娱乐
				</div>
				<div id="c1_4" class="hidden">
					军事
				</div>
				<div id="c1_5" class="hidden">
					生活
				</div>
			</div>
		</div>
	</div>
	<div class="preview">
		<div class="scrolldoorFrame">
			<ul class="scrollUl">
				<li class="st01" id="d_1">新闻</li>
				<li class="st02" id="d_2">财经</li>
				<li class="st02" id="d_3">娱乐</li>
				<li class="st02" id="d_4">军事</li>
				<li class="st02" id="d_5">生活</li>
			</ul>
			<div class="bor03 cont">
				<div id="c4_1">
					新闻
				</div>
				<div id="c4_2" class="hidden">
					财经
				</div>
				<div id="c4_3" class="hidden">
					娱乐
				</div>
				<div id="c4_4" class="hidden">
					军事
				</div>
				<div id="c4_5" class="hidden">
					生活
				</div>
			</div>
		</div>
	</div>
</body>
</html>
上一个：适应产品类网站点击向两侧展开的菜单
下一个：一个简洁型伸缩菜单
更多图片编程知识: