jQuery:在选项卡中添加Prev和Next [英] jQuery: add Prev and Next to tabs

问题描述

我正在尝试将上一个"和下一个"功能添加到我的标签"中，但是某些操作不起作用.

I am trying add Prev and Next functionality to my "tabs" but something not working.

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

其中一个标签"以活动"类开头，因此当用户单击下一个"时，

one of the "tab" start with "active" class so when the user click on the "next",

下一个选项卡"将获得活动"类，并且该类将从上一页"选项卡中删除.

the next "tab" will get the "active" class and this class will be removed from the Prev tab.

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

推荐答案

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

Your .tab and .active elements are the same thing (the links) at the same level in the DOM so parent() and find() aren't useful here, as these look up and down the DOM tree.

您只需要获取当前的.active标签，使用prev()或next()来获取其旁边的元素，然后在找到类的情况下交换类:

You just need to get the current .active tab, use prev() or next() to get the element next to it, then swap the classes if one is found:

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)，这意味着您位于开头或结尾，然后使用 last() 循环到另一端:

UPDATE: To go in a loop, you check if(newTab.length == 0) instead which means you are at the start or end, and then use first() and last() to loop to the other end:

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>

这篇关于jQuery:在选项卡中添加Prev和Next的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！