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

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

---

单击“下一步”按钮时，它不会关闭上一个分区。

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

$（'#tabInteract.buttons a'）。单击（函数（）{
var$button=$（this.toggleClass（'active'）；
$（'#tabInteract.buttons a'）。而不是（$button.removeClass（'active'）；
var$tab=$（'#'+$（this）.data（'tab'））.toggle（）；
$（'.closable_-box'）。而不是（$tab.hide（）；
})

a{
显示：内联；
保证金：5px；
颜色：#000；
}
a、 活跃的{
颜色：红色；
}
.closable_盒{
显示：无；
}

体育
汽车
水果
猫

太棒了！谢谢你。

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