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

それはうまくいきます。ここにデモフィドルがあります。

Answer 2

これを試して：

$(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/

Answer 3

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