如何制作滑动门的简单方法

网页制作中，很多时候我们需要充分利用空间。这时候我们需要使用滑动门这种简单而实用的技术。

　　滑动门的种类有很多很多，从简单的几行JS代码生成的滑动门复杂至使用jQuery效果库实现各种各样的切换效果的都有。下面将提供一个简单的滑动门代码，给大家一点制作思路。

　　JS源码

　
{script type="text/javascript"}
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementByIdx_x_x(name+i);
var con=document.getElementByIdx_x_x("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
{/script}

　　以上源码是在互联网上搜索回来的，网上有很多像这样的简单滑动门[/b]JS，如果有更加特别的效果，大家可以使用jQuery。

　　HTML源码

<div class=Menubox>
<UL>
<LI id=menu1 class=hover onmouseover="setTab('menu',1,3)">Tab1</LI>
<LI id=menu2 onmouseover="setTab('menu',2,3)">Tab2</LI>
<LI id=menu3 onmouseover="setTab('menu',3,3)">Tab3</LI>
</UL>
</div>
<div class=Contentbox>
<div id=con_menu_1 class=hover>
<H1>Tab1 Title</H1>
<P>Tab1 Content</P>
<P>HelloWorld!</P>
</div>
<div style="DISPLAY: none" id=con_menu_2>
<H1>Tab2 Title</H1>
<P>Tab2 Content</P>
<P>HelloWorld!!<BR>
HelloWorld!!</P>
</div>
<div style="DISPLAY: none" id=con_menu_3>
<H1>Tab3 Title</H1>
<P>Tab3 Content.</P>
<P>HelloWorld!!!<BR>
HelloWorld!!!<BR>
HelloWorld!!!</P>
</div>
</div>

　　滑动门主要结构，外层有个div（id＝Tab）作外层容器，滑动门分上下两层，id为menubox和Contentbox，分别容纳点击菜单和菜单内容。

　　命名规则说明：点击菜单的id需要定义为menu#（#为数字），菜单内容的id定义为con_menu_#（#为数字）。以上命名是根据JS中的定义而命名的。

　　属性说明：

　　1.除首个菜单内容的DIV容器不用添加 style="DISPLAY: none" 外，其他菜单都需要添加以上属性。

　　2.onmouseover="setTab('menu',2,3)"中的参数说明：'menu'即li的id中的menu,2即是id中的序号，3则是点击菜单的总数。

　　CSS源码

#tabs {
width:540px;
margin:10px auto;
overflow:hidden;
}
.Menubox {
height:35px;
border:1px solid #999;
background:#CCC;
}
.Menubox ul {
list-style:none;
margin:0;
padding:0;
position:relative;
}
.Menubox ul li {
font: 15px/35px "微软雅黑","华文细黑",Tahoma,Sans-serif;
float:left;
display:block;
cursor: pointer;
width:120px;
text-align:center;
color:#000;
border-right:1px solid #999;
}
.Menubox ul li span {
display:block;
border:1px #FFF solid;
}
.Menubox ul li.hover {
background:#FFF 4px 4px;
color:#147AB8;
font-weight:700;
}
.Contentbox {
margin:0px;
padding:5px 13px;
height:180px;
font: 13px/150% Tahoma,"宋体",Sans-serif;
background:#F5F5F5;
border:1px #999 solid;
border-top:none;
}

　　以上CSS代码定义都比较简单，对应的是相应容器中的元素属性。

<SCRIPT
type=text/javascript>

//互换一

function showDiv2(obj,num,len)

{

for(var id = 1;id<=len;id++)

{

var ss=obj+id;

var snav =obj+"nav"+id;

if(id==num){

try{document.getElementByIdx_x(ss).style.display="block"}catch(e){};

try{document.getElementByIdx_x(snav).className="span3"}catch(e){};

}else{

try{document.getElementByIdx_x(ss).style.display="none"}catch(e){};

try{document.getElementByIdx_x(snav).className="span4"}catch(e){};

}

}

}

</SCRIPT>

<SPAN id=hottnav1 class=span3

onmouseover="javascript:showDiv2('hott',1,5);">系统方案</SPAN>

<SPAN id=hottnav2

class=span4
onMouseOver="javascript:showDiv2('hott',2,5);">工程施工</SPAN>

<SPAN

id=hottnav3 class=span4

onmouseover="javascript:showDiv2('hott',3,5);">常用范本</SPAN>

<SPAN id=hottnav4

class=span4
onMouseOver="javascript:showDiv2('hott',4,5);">驱动下载</SPAN>

<SPAN

id=hottnav5 class=span4

onmouseover="javascript:showDiv2('hott',5,5);">产品手册</SPAN>

</DIV>

<DIV class=www>

<DIV style="DISPLAY: block" id=hott1
class=content22>

<DIV class=onx>

<UL>

<{news typeid="66" row="28"
titlelen="15"}>

<LI>·
<A title="[field:fulltitle]"
href="[link:title]"
target=_blank>[field:title]</A></LI>

<{/news}>

</UL></DIV></DIV>

<DIV style="DISPLAY: none" id=hott2
class=content22>

<DIV class=onx>

<UL>

<{news typeid="67" row="28"
titlelen="15"}>

<LI>·
<A title="[field:fulltitle]"
href="[link:title]"
target=_blank>[field:title]</A></LI>

<{/news}>

</UL></DIV></DIV>

<DIV style="DISPLAY: none" id=hott3
class=content22>

<DIV class=onx>

<UL>

<{news typeid="68" row="28"
titlelen="15"}>

<LI>·
<A title="[field:fulltitle]"
href="[link:title]"
target=_blank>[field:title]</A></LI>

<{/news}>

</UL></DIV></DIV>

<DIV style="DISPLAY: none" id=hott4
class=content22>

<DIV class=onx>

<UL>

<{news typeid="69" row="28"
titlelen="15"}>

<LI>·
<A title="[field:fulltitle]"
href="[link:title]"
target=_blank>[field:title]</A></LI>

<{/news}>

</UL></DIV></DIV>

<DIV style="DISPLAY: none" id=hott5
class=content22>

<DIV class=onx>

<UL>

<{news typeid="70" row="28"
titlelen="15"}>

<LI>·
<A title="[field:fulltitle]"
href="[link:title]"
target=_blank>[field:title]</A></LI>

<{/news}>

</UL></DIV></DIV></DIV></DIV></DIV>