多个滑动门重复调用(JavaScript+Css)

代码简介：一款能用的CSS滑动门能用类，在滑动门与选项卡之间切换很容易，只需将onmouseover 改成onclick即可，而且它也支持在同一页面多次调用重复使用，大大增加了易用性，代码中的注释也比较全面，推荐给大家。

代码内容：

< html >
< head >
< title > 多个滑动门重复调用(JavaScript+Css)_网页代码站(www.webdm.cn) </ 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 >
< br >
< p >< a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！ </ p >

 

代码来自：http://www.webdm.cn/webcode/42e4e1e4-8db6-43c3-9185-3a657ac65699.html

 

转载于:https://www.cnblogs.com/webdm/archive/2011/01/27/1946089.html