jq滑动门代码（jq 滑动事件）[20240421更新]

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

本文目录一览：

• 1、js代码那个滑动门 为什么在进网页主页时候 本来应该鼠标触碰才显示的内容 全显示出来了 应该怎么解决
• 2、滑动门是怎么做的啊
• 3、jquery 对进行分组

js代码那个滑动门 为什么在进网页主页时候 本来应该鼠标触碰才显示的内容 全显示出来了 应该怎么解决

你首先在css里面设置都不显示，然后通过jq控制默认第一个显示。

滑动门是怎么做的啊

滑动门可以用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效果库实现各种各样的切换效果的都有。网页制作中，很多时候需要充分利用空间。这时候需要使用滑动门这种简单而实用的技术。

jquery 对进行分组

html

body

ul

lixxxxxx1/li

lixxxxxx2/li

lixxxxxx3/li

lixxxxxx4/li

lixxxxxx5/li

lixxxxxx6/li

lixxxxxx7/li

lixxxxxx8/li

lixxxxxx9/li

lixxxxxx10/li

lixxxxxx11/li

lixxxxxx12/li

lixxxxxx13/li

lixxxxxx14/li

lixxxxxx15/li

/ul

ul id="ul0"/ul

ul id="ul1"/ul

ul id="ul2"/ul

/body

script type="text/javascript" src="jquery-1.7.2.min.js"/script

script type="text/javascript"

$(document).ready(function(){

$("li").each(function(i){

var id = "ul"+parseInt(i/10);

$(this).appendTo("#"+id);

});

});

/script

/html

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