Кнопки «Вперед» и «Предыдущий» перемещаются по вкладкам Bootstrap - PullRequest
Новая
       55

Кнопки «Вперед» и «Предыдущий» перемещаются по вкладкам Bootstrap

0 голосов
/ 12 октября 2018

Я пытаюсь заставить некоторые кнопки «Предыдущий» и «Следующий» переходить по некоторым панелям вкладок 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();
    }
  });  
});

Я полагаю, что если я смогу выяснить,следующий шаг через часть, тогда я мог бы изменить предыдущий, чтобы следовать.

1 Ответ

0 голосов
/ 12 октября 2018

Хорошо, после того, как разберёмся с этим и расспросим, ​​я нашел следующее: 

    $(".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

...