Question

我有4个不同的div和4个按钮，我试图使用jQuery创建标签内容，但我无法正常工作。所以，我使用了data-tab属性。

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>

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

1 个答案: