首页 文章

Jquery：如何遍历dom to slide切换标签元素组

提问于
浏览 次
1

我在同一页面上有一组标签链接和标签内容窗格，每个窗格都有不同数量的标签 .

<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>

其中，在每个选项卡组中，第一个选项卡链接应该单击时切换第一个选项卡内容，第二个选项卡链接slideToggles第二个内容，3和4相同 . 对于其他选项卡组重复此操作 .

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

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

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

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

...等每个标签 .

Question 1) 是否有更有效的方法来编写代码，因此每次添加新选项卡或新选项卡组时，每个选项卡和窗格都不需要对所有内容进行硬编码（例如，tab1，tab2，tab-pane1等） .

（我正在考虑“确定在tab-content-group（第1个，第2个第3个等）中单击哪个选项卡然后找到下一个tab-pane-group和slideToggle在那里的相应选项卡窗格（第1个选项卡）切换第一个选项卡窗格，第二个选项卡切换第二个选项卡窗格等） - 但我不知道如何使用JQuery实现这一点！）

请注意我无法更改HTML结构 .

Question 2) 使这些slideToggles行为的最佳方法是，让每个组成员知道彼此的切换状态，以确保在打开新标签时关闭所有打开的标签页 .

非常感谢任何建议 .

jquery tabs

2 回答

  • 0

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

    $('.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>
    回复于
  • 0

    Question 1)

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

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

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

    Question 2)

    隐藏所有选项卡，然后只打开单击的选项卡

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

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

相关问题