滑动门是怎么做的啊_随笔

滑动门可以用javascript来制作，其代码如下所示：

html,body{margin:0text-align:centerover-flow:hiddenheight:100%width:100%}

ul{list-style-type:nonemargin:0px}

.ctt{height:autoclear:bothborder:1px solid #064ca1border-top:0text-align:left}

.w936{margin:2px 0clear:bothwidth:936px/*整个滑动门的宽度*/}

/*tab切换效果*/

.tb_{滑动门背景}

.tb_ ul{height:24px}

.tb_ li{float:leftmargin-right:2pxheight: 24pxline-height:1.9width: 94pxcursor:pointer}

/*用于控制显示与隐藏的css类*/

.normaltab{选中的滑动门标签背景}

.hovertab{未选中的滑动门标签背景}

.dis{display:block}

.undis{display:none}

-->

</style>

//<!cdata[

function g(o){return document.getElementbyId(o)}

function HoverLi(n){

//如果有N个标签，就将i<=N

for(var i=1i<=3i++){g('tb_'+i).className='normaltab'g('tbc_0'+i).className='undis'}g('tbc_0'+n).className='dis'g('tb_'+n).className='hovertab'

}

//如果要做成点击后再转到请将<li>中的onmouseover改成onclick

//]]>

</script>

</head>

<body>

<ul>

标题1</li>

标题2</li>

标题3</li>

</ul>

</div>

</div>

滑动门的种类有很多很多，从简单的几行JS代码生成的滑动门复杂至使用jQuery效果库实现各种各样的切换效果的都有。网页制作中，很多时候需要充分利用空间。这时候需要使用滑动门这种简单而实用的技术。

您是说的滑动门效果吗？这个有很多办法可以实现。

比如先准备好下面全部内容，但只设定其中一个可见，其它隐藏。当点击上方导航栏时，就把下面相应内容的可见属性打开，别的隐藏。如此重复。

欢迎分享，转载请注明来源：内存溢出

滑动门是怎么做的啊