братьев и сестер в JQuery скрыть все

Question

Это мой HTML код:

<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); 
    }); 
}); 

так вы можете видеть, что когда вы нажимаете на вкладку, все вкладки ушли и как я могу это исправить?

Answer 1

изменить линию

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

в

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

он будет работать нормально. Here - демонстрационная скрипка.

Answer 2

Редактировать 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); 
    }); 
}); 

Answer 3

Попробуйте это:

$(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); 
    }); 
}); 

Чтобы только скользить вверх братьев и сестер, которые являются вкладки. В противном случае все братья и сестры, включая вашу улицу, будут скользить вверх.

Заметим также, что $(this).siblings(this) не имеет смысла, потому что аргумент вы передаете siblings() представляет собой фильтр из братьев и сестер, которые вы хотите использовать и this не будет его собственный брат.

Демо: http://jsfiddle.net/XtfRt/