-2

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

所以你可以看到当你点击一个标签时，所有的标签都消失了，我该如何解决这个问题？

4

3 回答 3

1

改变你的线路

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

至

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

它会正常工作。这是一个演示小提琴。

于 2013-11-09T21:44:27.240 回答
0

像这样编辑 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);
  });
});
于 2013-11-09T21:45:11.650 回答
0

尝试这个：

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

于 2013-11-09T21:48:44.620 回答