tab滑动门代码（css滑动门代码）[20240505更新]

本篇文章给大家谈谈tab滑动门代码，以及css滑动门代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、滑动门是怎么做的啊
• 2、asp TAB页滑动门效果求js高手帮解
• 3、CSS+DIV做滑动门菜单，和TAB式选项卡菜单，要详细步骤

滑动门是怎么做的啊

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

html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}

ul{list-style-type:none; margin:0px;}

.ctt{height:auto;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}

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

/*tab切换效果*/

.tb_{滑动门背景}

.tb_ ul{height:24px;}

.tb_ li{float:left; margin-right:2px;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}

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

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

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

.dis{display:block;}

.undis{display:none;}

--

/style

script type="text/javascript" language="javascript"

//!cdata[

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

function HoverLi(n){

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

for(var i=1;i=3;i++){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

!--把下面代码加到body与/body之间--

div class="w936"

div id="tb_" class="tb_"

ul

li id="tb_1" class="hovertab" onMouseOver="x:HoverLi(1);"

标题1/li

li id="tb_2" class="normaltab" onMouseOver="i:HoverLi(2);"

标题2/li

li id="tb_3" class="normaltab" onMouseOver="a:HoverLi(3);"

标题3/li

/ul

/div

div class="ctt"

div class="dis" id="tbc_01"内容1/div

div class="undis" id="tbc_02"内容2/div

div class="undis" id="tbc_03"内容3/div

/div

/div

/div

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

asp TAB页滑动门效果求js高手帮解

加一段javascript

for(i=0;imain.childNodes[0].childNodes.length;i++) {

main.childNodes[0].childNodes[i].style.display="none"; }

main.childNodes[0].childNodes[0].style.display="block";

tab键简单，加上tabindex就行了

CSS+DIV做滑动门菜单，和TAB式选项卡菜单，要详细步骤

你用dreamweaver cs4的那里有现成的，直接在编辑器里创建就行了，具体步骤 插入—spry—菜单栏，选项卡式面板，折叠式等，很多，，然后如果你会css+div的话可以把他们放到你想用的位置，找到相应代码修改下你想要的颜色就可以了，另外说一下，在cs4里，你直接按住alt直接可以转到标签（相应css），希望可以对你有所帮助

tab滑动门代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css滑动门代码、tab滑动门代码的信息别忘了在本站进行查找喔。