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

仅向上滑动作为标签的兄弟姐妹。否则包括你的ul在内的所有兄弟姐妹都会向上滑。

另请注意，$(this).siblings(this)没有意义，因为您传递给siblings()的参数是您要使用的兄弟姐妹的过滤器，而this将不是它自己的兄弟节点。

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

jquery中的兄弟姐妹隐藏了一切

3 个答案: