我正在尝试使一些“上一个”和“下一个”按钮逐步通过一些“ 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

确定下来并询问周围之后，我发现了： 

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

  ask by ultraloveninja translate from so

未解决问题？本站智能推荐：

2回复

如何从外部链接打开引导程序 3 选项卡？

我想在我网站的另一个页面中创建一个针对特定选项卡的链接。 我试图创建这样的链接：www.example.com/test.html#tab2，但它总是针对第一个选项卡（我猜是带有显示类的选项卡）。 索引.html <a href="test.html#menu-catalog">li
1回复

Bootstrap 选项卡 - 下一个和上一个按钮

我正在使用 Bootstrap 3.4。 我在带有 3 个标签的表单上使用标签丸。 我正在尝试放置下一个和上一个按钮以帮助在选项卡表单之间导航。 我已经阅读了有关该主题（和bootply ）的这篇文章，这正是我所需要的，并且我应用了必要的代码。 在我的表单上，在所有 3 个选项卡中，我总是看
1回复

Bootstrap选项卡与下拉按钮的混合

使用bootstrap我正在尝试组合引导选项卡和下拉按钮。 基本上我想要完成的是我有一个带有下拉按钮的空白页面。 按钮显示“请选择一个”，单击按钮时会显示下拉菜单。 当您单击其中一个选项时，该选项的内容将显示在下方。 然后，当您单击内容显示的另一个选项时。 我现在设置的方式现在可以
1回复

下一个标签页显示内容，但标签页不跟随

我有2个表格，两个标签分开。 活动和不活动 假设我点击了活动标签中的下一个按钮。 显示了非活动选项卡的内容，但活动选项卡仍然是活动选项卡。 我想念什么吗？ 假设它们对应的ID为#Active和#Inactive。 这是下一个按钮的代码：
2回复

选项卡需要单击两次以将选项卡更改为活动选项卡

我有一个关于活动标签的问题。我使用.append（）来构建标签，并且我不使用href连接标签的数据。 当我单击tab .console log（）以显示活动选项卡的文本时。 我的问题是，当我单击选项卡2时，活动选项卡的文本仍然是选项卡1。 我必须再次单击选项卡2，活动选项卡将更改为选
1回复

Bootstrap 3-在选项卡中的表格内调用AJAX并在选项卡内加载内容

我的标签定义： <html> <head> </head> <body> <ul class="nav nav-tabs" id="rcg-tabs"> <li><a href="#tasks" data-t
2回复

无法将JSON正确加载到Bootstrap选项卡

我正在尝试像以下代码一样将JSON数据动态加载到Bootstrap 3 Tab中。 我能够加载nav-tabs，但在加载内容上没有任何成功。 您能否看一下这个问题，让我知道如何解决？ var data = { "action": [ { "id": "1001", "nam
2回复

下一个上一个Bootstrap选项卡

单击相应的按钮引导程序选项卡时，我有两个常见的“下一个”和“上一个”按钮会移动。 我有为此创建以下代码。 我的密码 我的问题是我想在单击“下一步”时显示上一个按钮，但想在第一个选项卡上隐藏，反之亦然。 请帮忙。