jQuery：在标签中添加Prev和Next

Question

我正在尝试将Prev和Next功能添加到我的＆＃34;标签＆＃34;但是有些事情没有用。

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

其中一个＆＃34;标签＆＃34;从＆＃34;活跃＆＃34;开始因此，当用户点击＆＃34; next＆＃34;，

时

下一个＆＃34;标签＆＃34;将获得＆＃34;活跃＆＃34; class和此类将从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()获取旁边的元素，然后交换类（如果找到一个）：

＆＃13;

＆＃13;

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

＆＃13;

.active {
    border:1px solid #000;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

.active {
  border: 1px solid #000;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;