jQuery：将 Prev 和 Next 添加到选项卡

Posted 2023-02-25

【中文标题】jQuery：将 Prev 和 Next 添加到选项卡

【英文标题】：jQuery: add Prev and Next to tabs

【发布时间】：2015-07-04 10:10:34

【问题描述】：

我正在尝试将 Prev 和 Next 功能添加到我的“选项卡”，但有些东西不起作用。

这里是html：

<a href="#" class="next-tab">next</a>
<a href="#" class="prev-tab">prev</a>

<div class="tabs">

<a href="#" class="tab new-messages">
<a href="#" class="tab statistics active">
<a href="#" class="tab shop">

</div>

其中一个“选项卡”以“活动”类开头，因此当用户单击“下一步”时，

下一个“选项卡”将获得“活动”类，并且该类将从 Prev 选项卡中删除。

jQuery：

jQuery(document).ready(function($) 
    $('.next-tab').click(function () 
     if( $('.tab').hasClass("active")) 
       var tab = $('.tab').find("a.active");
       $(tab).parent().next().children().addClass("active");
       $(tab).removeClass("active");
       
    );
);

【参考方案1】：

您的 .tab 和 .active 元素在 DOM 中的同一级别是同一事物（链接），因此 parent() 和 find() 在这里没有用，因为它们在 DOM 树中上下查找.

您只需要获取当前的.active 选项卡，使用prev() 或next() 来获取它旁边的元素，然后在找到时交换类：

jQuery(document).ready(function($) 
    $('.next-tab').click(function () 
        // get current tab
        var currentTab = $(".tab.active");
        // get the next tab, if there is one (i.e. we are not at the end)
        var newTab = currentTab.next();
        if(newTab.length > 0) 
            // remove active from old tab
            currentTab.removeClass('active');
            // add active to new tab
            newTab.addClass('active');
        
    );
    
    $('.prev-tab').click(function () 
        var currentTab = $(".tab.active");
        var newTab = currentTab.prev();
        if(newTab.length > 0) 
            currentTab.removeClass('active');
            newTab.addClass('active');
        
    );
);

.active 
    border:1px solid #000;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="next-tab">next</a>
<a href="#" class="prev-tab">prev</a>

<div class="tabs">

    <a href="#" class="tab new-messages">Messages</a>
    <a href="#" class="tab statistics active">Stats</a>
    <a href="#" class="tab shop">Shop</a>

</div>

更新：要进入循环，请检查if(newTab.length == 0)，这意味着您在开始或结束，然后使用first() 和last() 循环到另一端：

jQuery(document).ready(function($) 
  $('.next-tab').click(function() 
    // get current tab
    var currentTab = $(".tab.active");

    // get the next tab, if there is one
    var newTab = currentTab.next();

    // at the end, so go to the first one
    if (newTab.length === 0) 
      newTab = $(".tab").first();
    

    currentTab.removeClass('active');
    // add active to new tab
    newTab.addClass('active');
  );

  $('.prev-tab').click(function() 
    // get current tab
    var currentTab = $(".tab.active");

    // get the previous tab, if there is one
    var newTab = currentTab.prev();

    // at the start, so go to the last one
    if (newTab.length === 0) 
      newTab = $(".tab").last();
    

    currentTab.removeClass('active');
    // add active to new tab
    newTab.addClass('active');
  );
);

.active 
  border: 1px solid #000;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="next-tab">next</a>
<a href="#" class="prev-tab">prev</a>

<div class="tabs">

  <a href="#" class="tab new-messages">Messages</a>
  <a href="#" class="tab statistics active">Stats</a>
  <a href="#" class="tab shop">Shop</a>

</div>

【讨论】：

嗨@Rhumborl 谢谢。我们如何改进这段代码，这样当我们点击“下一个”或“上一个”时，它会继续循环（循环）？