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

　　滑动门的种类有很多很多，从简单的几行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}

简单滑动门JS，如果有更加特别的效果，大家可以使用jQuery。

　　HTML源码

<div class=Menubox>
  <UL>
    <LI id=menu1 class=hover οnmοuseοver="setTab('menu',1,3)">Tab1</LI>
    <LI id=menu2 οnmοuseοver="setTab('menu',2,3)">Tab2</LI>
    <LI id=menu3 οnmοuseοver="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.οnmοuseοver="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
 οnmοuseοver="javascript:showDiv2('hott',1,5);">系统方案</SPAN>
 <SPAN id=hottnav2
 class=span4 onMouseOver="javascript:showDiv2('hott',2,5);">工程施工</SPAN>
 <SPAN
 id=hottnav3 class=span4
 οnmοuseοver="javascript:showDiv2('hott',3,5);">常用范本</SPAN>
 <SPAN id=hottnav4
 class=span4 onMouseOver="javascript:showDiv2('hott',4,5);">驱动下载</SPAN>
 <SPAN
 id=hottnav5 class=span4
 οnmοuseοver="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}>