형제이 내 html 코드 모든 것을

Question

을 숨길 수 :

<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("div").slideUp(500); 

에 라인

$('#tabs-'+count).slideDown(500).siblings(this).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); 
    }); 
}); 

합니다. 그렇지 않으면 당신의 ul을 포함한 모든 형제가 위로 미끄러 져 갈 것입니다.

siblings()에 전달하는 인수가 사용하려는 형제의 필터이고 this은 (는) 형제가 아니기 때문에 $(this).siblings(this)은 의미가 없습니다.

데모 : http://jsfiddle.net/XtfRt/