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

Question

我正在尝试将 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");
       }
    });
});

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