javascript - 具有不同 div id 的 jQuery 多个切换按钮

Question

我有 4 个不同的 div 和 4 个按钮，我正在尝试使用 jQuery 创建一个选项卡式内容，但我无法让它正常工作。所以，我使用了 data-tab 属性。

jsfiddle.net

jQuery(document).ready(function() {
jQuery('#tabInteract .buttons a').click(function() {
  var index = jQuery(this).index();
  if(jQuery(this).hasClass('active')) {
    jQuery(this).removeClass('active');
     jQuery('#' + jQuery(this).data('tab')).toggleClass(true);
  } else {
      jQuery('#tabInteract .buttons a').removeClass('active');
    jQuery(this).addClass('active')
    jQuery('#' + jQuery(this).data('tab')).toggleClass(true);
  }
})
});

当我点击下一个按钮时，它不会关闭上一个 div。

Answer 1

要实现此行为，您需要切换事件按钮及其相关选项卡的状态，同时隐藏所有其他选项卡并从其他按钮中删除事件类。试试这个:

$('#tabInteract .buttons a').click(function() {
  var $button = $(this).toggleClass('active');
  $('#tabInteract .buttons a').not($button).removeClass('active');

  var $tab = $('#' + $(this).data('tab')).toggle();
  $('.closable_box').not($tab).hide();
})

a {
  display: inline;
  margin: 5px;
  color: #000;
}
a.active {
  color: red;
}
.closable_box {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabInteract">
  <div class="buttons">
    <a data-tab="sports" href="#">Button A</a>
    <a data-tab="cars" href="#">Button B</a>
    <a data-tab="fruits" href="#">Button C</a>
    <a data-tab="cats" href="#">Button D</a>
  </div>
</div>

<div class="closable_box" id="sports">
  Sports
</div>
<div class="closable_box" id="cars">
  Cars
</div>
<div class="closable_box" id="fruits">
  Fruits
</div>
<div class="closable_box" id="cats">
  Cats
</div>