代码之家 › 专栏 › 技术社区 › ultraloveninja

“下一步”和“上一步”按钮逐步通过引导选项卡

bootstrap-tabs twitter-bootstrap-3 html jquery javascript

ultraloveninja · 技术社区 · 7 年前

我正在尝试获取一些上一步和下一步按钮,以逐步通过一些引导选项卡窗格。

我读过一些文章,似乎很接近,但不是我在找什么。

其他的例子似乎在寻找 active

到目前为止我一直在用 .next() 积极的 show 类添加到选项卡窗格中,但它似乎将它们添加到所有选项卡窗格中,而不是单独添加到一个选项卡窗格中。所以,如果我走的是正确的道路,或者有更简单的方法来实现这一点,我就不是100%了?好像有,我可能只是在给自己制造麻烦。

不管怎样,这是我到目前为止得到的。。。

代码笔链接: 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 回复 | 直到 7 年前

ultraloveninja 7 年前

好吧,我把它分解了,四处打听了一下,发现:

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