简单的jquery滑动门代码

发布于 | 更新于 | 分类于 燕衔春泥| 标签 、、| 0

简单的jquery滑动门代码，收来以备不时之需。
html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<ul id="jq_hdm">
<li class="active">
<h3>111111111111111111111</h3>
<p>222222222222222222222222222222222222222</p>
</li>
<li>
<h3>111111111111111111111</h3>
<p>222222222222222222222222222222222222222</p>
</li>
<li>
<h3>111111111111111111111</h3>
<p>222222222222222222222222222222222222222</p>
</li>
<li>
<h3>111111111111111111111</h3>
<p>222222222222222222222222222222222222222</p>
</li>
<li>
<h3>111111111111111111111</h3>
<p>222222222222222222222222222222222222222</p>
</li>
</ul>

js代码

1
2
3
4
5
6
7
8
9
 
$(function(){
   $("#jq_hdm li").each(function(){
      $(this).mouseover(
         function(){
            $("#jq_hdm li.active").removeClass("active");
            $(this).addClass("active");
      });
   });
});

发表评论

您的电子邮箱地址不会被公开。