下一個和上一個按鈕逐步瀏覽Bootstrap選項卡

Question

我正在嘗試使一些“上一個”和“下一個”按鈕逐步通過一些“ Bootstrap”選項卡窗格。

我讀過一些文章，看起來似乎很接近，但並非完全符合我的期望。

其他示例似乎在尋找active導航選項卡，但是下一個和上一個按鈕位於單獨的選項卡容器中，而我試圖使它們獨立於它們位於導航容器中，因此該方法實際上不起作用。

到目前為止，我一直在使用.next()將active類和show類添加到選項卡窗格中，但似乎將它們添加到所有選項卡窗格中，而不僅僅是將它們單獨添加。 因此，如果我走對了路，或者有更簡單的方法可以做到這一點，我不是100％？ 好像有，我可能正對自己感到困難。

無論如何，這就是我到目前為止所擁有的...

Codepen鏈接： https ：//codepen.io/ultraloveninja/pen/OBjmzy/

HTML：

<div class="container">

    <!-- Nav tabs -->
    <ul id="mytabs" class="nav nav-tabs" role="tablist">
      <li class="active">
          <a href="#first" role="tab" data-toggle="tab">
              <icon class="fa fa-home"></icon> First tab
          </a>
      </li>
      <li><a href="#second" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Second tab
          </a>
      </li>
      <li>
          <a href="#third" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Third tab
          </a>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade active in" id="first">
        <h2>First tab</h2>
      </div>
      <div class="tab-pane fade" id="second">
          <h2>Second tab</h2>
      </div>
      <div class="tab-pane fade" id="third">
          <h2>Third tab</h2>
      </div>
    </div>

  <a class="btn prev" href="#">Previous</a>
  <a class="btn next" href="#">Next</a>

</div>

JS：

$(function(){
  $('#mytabs a:first').tab('show');

  $('.next').on("click",function(e){
    var $this = $(this);
    if($(".tab-pane").hasClass("active")) {
      $('.tab-pane').next().addClass('show active');
      $this.prev().removeClass('show active');
      e.preventDefault();
    }
  });  
});

我認為，如果我可以逐步了解下一步，那么可以修改之前的步驟。

Answer 1

確定下來並詢問周圍之后，我發現了：

    $(".next").on("click", function(e) {
    const $active = $(".tab-pane.active");
    const $next = $active.next();

    if ($next.length) {
      $active.removeClass("active show");
      $next.addClass("active show");
    }
    e.preventDefault();
  });

  $(".prev").on("click", function(e) {
    const $active = $(".tab-pane.active");
    const $prev = $active.prev();

    if ($prev.length) {
      $active.removeClass("active show");
      $prev.addClass("active show");
    }
    e.preventDefault();
  });

最大的事情是，您需要確保在保存選項卡窗格的div 之外具有上一個和下一個按鈕。 否則，它將繼續下滑。

這是我整理的一支非常精致的筆，以幫助說明我要實現的目標：

https://codepen.io/ultraloveninja/pen/OBjmzy