Javascript jquery中的同级隐藏所有内容

这是我的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>

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

因此，您可以看到，当您单击某个选项卡时，所有选项卡都消失了，我如何解决此问题？

更改您的行

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

到

---

它会很好用的。是一个演示小提琴。

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

试试这个：

$(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）.sides（this）

没有意义，因为传递给

sides（）

的参数是要使用的同级的过滤器，而

this

将不是它自己的同级

---

演示：

请稍微清理一下代码，添加适当的缩进、换行等。这有点乱，很难轻松使用。

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

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