Jquery：如何遍历 dom 以滑动切换选项卡元素组

Question

我在同一页面上有一组选项卡链接和选项卡内容窗格，每个窗格都有不同数量的选项卡。

<div class="tab-content-group1">
  <div class="tabs-group">
    <a class="tab1">Tab 1</a>
    <a class="tab2">Tab 2</a>
    <a class="tab3">Tab 3</a>
  </div>
  <div class="tab-pane-group">
    <div class="tab-pane1">Tab Content 1</div>
    <div class="tab-pane2">Tab Content 2</div>
    <div class="tab-pane3">Tab Content 3</div>
  </div>
</div>

<div class="tab-content-group2">
  <div class="tabs-group">
    <a class="tab4">Tab 4</a>
    <a class="tab5">Tab 5</a>
    <a class="tab6">Tab 6</a>
    <a class="tab7">Tab 7</a>
  </div>
  <div class="tab-pane-group">
    <div class="tab-pane4">Tab Content 4</div>
    <div class="tab-pane5">Tab Content 5</div>
    <div class="tab-pane6">Tab Content 6</div>
    <div class="tab-pane7">Tab Content 7</div>
  </div>
</div>

<div class="tab-content-group3">
  <div class="tabs-group">
    <a class="tab8">Tab 8</a>
  </div>
  <div class="tab-pane-group">
    <div class="tab-pane8">Tab Content 8</div>
  </div>
</div>

在每个选项卡组中，第一个选项卡链接应该在单击时滑动切换第一个选项卡内容，第二个选项卡链接滑动切换第二个内容，对于 3 和 4 也是如此。对于其他选项卡组重复此操作。

要在单击选项卡时滑动切换内容窗格，我一直在使用这个：

  $(".tab1").click(function() {
    $("tab1").slideToggle("slow", function() {});
  });

  $(".tab2").click(function() {
    $("tab2").slideToggle("slow", function() {});
  });

   $(".tab3").click(function() {
    $("tab3").slideToggle("slow", function() {});
  });

...等每个选项卡。

问题 1) 是否有更有效的方法来编写代码，这样每个选项卡和窗格都不需要在任何时候添加新选项卡或新选项卡组（例如。 tab1、tab2、tab-pane1 等）。

（我正在考虑类似“确定在选项卡内容组（第 1、第 2、第 3 等）中单击哪个选项卡，然后找到下一个选项卡窗格组并滑动切换其中的相应选项卡窗格（第一个选项卡切换第一个选项卡窗格，第二个选项卡切换第二个选项卡窗格等）——但我不知道如何使用 JQuery 实现这一点！）

请注意，我无法更改 HTML 结构。

问题 2) 让这些 slideToggles 表现得好像是一个知道彼此切换状态的组的一部分的最佳方法是什么，以确保在新选项卡出现时关闭所有打开的选项卡打开了。

非常感谢您的建议。

Answer 1

使用您的 HTML 结构，您可以将每个 a 元素的索引用于 slideToggle div 中的 .tab-pane-group

$('.tab-pane-group div').hide();
$('.tabs-group a').click(function() {
  var i = $(this).index();
  $(this).parent().next().find('div:eq(' + i + ')').slideToggle().siblings().slideUp();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-content-group1">
  <div class="tabs-group">
    <a class="tab1">Tab 1</a>
    <a class="tab2">Tab 2</a>
    <a class="tab3">Tab 3</a>
  </div>
  <div class="tab-pane-group">
    <div class="tab-pane1">Tab Content 1</div>
    <div class="tab-pane2">Tab Content 2</div>
    <div class="tab-pane3">Tab Content 3</div>
  </div>
</div>

<div class="tab-content-group2">
  <div class="tabs-group">
    <a class="tab4">Tab 4</a>
    <a class="tab5">Tab 5</a>
    <a class="tab6">Tab 6</a>
    <a class="tab7">Tab 7</a>
  </div>
  <div class="tab-pane-group">
    <div class="tab-pane4">Tab Content 4</div>
    <div class="tab-pane5">Tab Content 5</div>
    <div class="tab-pane6">Tab Content 6</div>
    <div class="tab-pane7">Tab Content 7</div>
  </div>
</div>

<div class="tab-content-group3">
  <div class="tabs-group">
    <a class="tab8">Tab 8</a>
  </div>
  <div class="tab-pane-group">
    <div class="tab-pane8">Tab Content 8</div>
  </div>
</div>

如果你还想隐藏其他.tab-pane-group中的div，你可以使用这个

$('.tab-pane-group div').hide();
$('.tabs-group a').click(function() {
  var i = $(this).index();
  $('.tab-pane-group div').slideUp();
  $(this).parent().next().find('div:eq(' + i + ')').slideToggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-content-group1">
  <div class="tabs-group">
    <a class="tab1">Tab 1</a>
    <a class="tab2">Tab 2</a>
    <a class="tab3">Tab 3</a>
  </div>
  <div class="tab-pane-group">
    <div class="tab-pane1">Tab Content 1</div>
    <div class="tab-pane2">Tab Content 2</div>
    <div class="tab-pane3">Tab Content 3</div>
  </div>
</div>

<div class="tab-content-group2">
  <div class="tabs-group">
    <a class="tab4">Tab 4</a>
    <a class="tab5">Tab 5</a>
    <a class="tab6">Tab 6</a>
    <a class="tab7">Tab 7</a>
  </div>
  <div class="tab-pane-group">
    <div class="tab-pane4">Tab Content 4</div>
    <div class="tab-pane5">Tab Content 5</div>
    <div class="tab-pane6">Tab Content 6</div>
    <div class="tab-pane7">Tab Content 7</div>
  </div>
</div>

<div class="tab-content-group3">
  <div class="tabs-group">
    <a class="tab8">Tab 8</a>
  </div>
  <div class="tab-pane-group">
    <div class="tab-pane8">Tab Content 8</div>
  </div>
</div>

Answer 2

问题 1)

是的，您可以通过$('.tab1, .tab2, .tab3, ...') 选择所有选项卡并使用$(this)：

$('.tab1, .tab2, .tab3, ...').click(function() {
    $(this).slideToggle("slow", function() {});
});

或选择所有以.tab开头的元素：$('[class^=tab]')

问题 2)

隐藏所有标签，只打开被点击的标签

var tabs = $('[class^=tab]');

tabs.click(function() {
    tabs.slideUp("slow", function() {});
    $(this).slideDown("slow", function() {});
});