jq切换效果

最新推荐文章于 2022-10-06 17:38:34 发布

weixin_33704234

最新推荐文章于 2022-10-06 17:38:34 发布

阅读量67

点赞数

原文链接：http://www.cnblogs.com/xyh592/articles/5088928.html

版权

案例一：

<div class="box2">
	<h2>
		<span class="on">新闻</span>
		<span class="s1">热门</span>
	</h2>

      <!--切换块-->
      <div class="wrap">
        <!--新闻-->
	<div class="show">1</div>
	<!--热门-->
	<div>2</div>
     </div>
</div>

$(function(){
    var span = $(".box2 h2 span");
    span.hover(function(){
        var index = $(this).index();
        span.eq(index).addClass("on").siblings().removeClass("on").parent().siblings(".wrap").children(".wrap>div").eq(index).addClass("show").siblings().removeClass("show")
    })
})
 
/* $(function(){
 
    var span = $(".box2 h2 span");
 
    span.click(function(){
 
        var index = $(this).index();
 
        span.eq(index).addClass("on").siblings().removeClass("on").parent().siblings().children("div").eq(index).stop(true,false).show(500).siblings().stop(true,false).hide(500);
 
    })
 
}) */

案例二：

<div class="wrap">
   <h2><span>男科</span>
     <p><a class="on">早泄</a> <a>尿道炎</a></p>
   </h2>
   <div class="btm"><!--切换块-->
      <div class="left">
         <div class="show">1</div>
         <div>2</div>
      </div>
     </div>
</div>
$(function(){

	var a = $(".wrap h2 p a");
	
	var show_div = $(".wrap .btm .left div");
	var speed =0; //下拉速度
	a.hover(function(){
		var index = $(this).index();
		a.eq(index).addClass("on").siblings().removeClass("on").parents().siblings().children().find(show_div).eq(index).stop(true,false).slideDown(speed).siblings().stop(true,false).slideUp(speed)
	})
})

转载于:https://www.cnblogs.com/xyh592/articles/5088928.html