兄弟姐妹jQuery中隐藏的一切

-2

<div id="tabbase"> 
    <ul> 
    <li>a</li> 
    <li>b</li> 
    </ul> 
<div id="tabs-0"></div> 
<div id="tabs-1"> 
    <div class="width50"> 
    <h5>title1</h5> 
    <div class="da-desc">a</div> 
    <button>continue</button> 
    </div> 
    <div class="width50"> 
    <h5>title2</h5> 
    <div class="da-desc">b</div> 
    <button>continue</button> 
</div> 
</div> 
</div>

这是CSS代码：

#tabbase { 
    margin:16px; 
} 
#tabbase ul li { 
    display:inline-block; 
    margin:5px 0px 5px 0; 
    background:rgb(224,224,224); 
    padding:5px; 
    border:1px solid rgb(153,153,153); 
    cursor:pointer; 
} 
#tabs-0, #tabs-1 { 
    border:1px solid rgb(153,153,153); 
    background:rgb(255,255,255); 
    padding:5px; 
    margin:-5px 0 0 0; 
} 
#tabbase ul li.active { 
    background:rgb(255,255,255) !important; 
}

，这是jQuery代码：

$(document).ready(function(e) { 
    $("#tabs-1").hide(0); 
    $("#tabbase ul li:first").addClass("active"); 
    $("#tabbase ul li").click(function(e) { 
    $(this).addClass("active"); 
    $(this).siblings(this).removeClass("active"); 
    count = $("#tabbase ul li").index(this); 
    $('#tabs-'+count).slideDown(500).siblings(this).slideUp(500); 
    }); 
});

所以你可以看到，当你点击一个标签时，所有标签都不见了，我该如何解决这个问题？

来源

2013-11-09 Behzad

请清理一下代码，添加适当的缩进，换行等，这是一个有点乱，很难轻松地使用。 – helion3

你行

$('#tabs-'+count).slideDown(500).siblings(this).slideUp(500);

改变

$('#tabs-'+count).slideDown(500).siblings("div").slideUp(500);

它将很好地工作。 Here是一个演示小提琴。

来源

2013-11-09 21:44:27 mithunsatheesh

编辑的jQuery这样的代码：

$(document).ready(function(e){ 
    $("#tabs-1").hide(0); 
    $("#tabbase ul li:first").addClass("active"); 
    $("#tabbase ul li").click(function(e) { 
    $(this).addClass("active"); 
    $(this).siblings(this).removeClass("active"); 
    count = $("#tabbase ul li").index(this); 
    $('#tabs-'+count).slideDown(500).siblings("div").slideUp(500); 
    }); 
});

来源

2013-11-09 21:45:11 WebEngine

试试这个：

$(document).ready(function(e) { 
    $("#tabs-1").hide(0); 
    $("#tabbase ul li:first").addClass("active"); 
    $("#tabbase ul li").click(function(e) { 
    $(this).addClass("active") 
      .siblings().removeClass("active"); 
    count = $("#tabbase ul li").index(this); 
    $('#tabs-'+count).slideDown(500).siblings('[id^="tabs-"]').slideUp(500); 
    }); 
});

要只向上滑动是选项卡中的兄弟姐妹。否则包括你的ul在内的所有兄弟姐妹都会滑动。

还要注意$(this).siblings(this)没有意义的，因为你传递给siblings()的说法是你想使用this不会是自己的同胞兄弟姐妹的过滤器。

演示：http://jsfiddle.net/XtfRt/

来源

2013-11-09 21:48:44 nnnnnn

兄弟姐妹jQuery中隐藏的一切

回答

相关问题