Question

我在使用Bootstrap的选项卡元素中有一些内容，如下所示：

<div class="tab-content"> 
   <div class="tab-pane active" id="website-information">
      ...
   </div> 
   <div class="tab-pane" id="personal-information"> 
      ...
   </div> 
   <div class="tab-pane" id="payment-information"> 
      ...
   </div> 
</div>

然后在这之后我有一些像这样的分页元素：

<ul class="pager">
   <li class="previous"><a href="#website-information" data-toggle="tab">Previous</a></li>
   <li class="next"><a href="#owner-information" data-toggle="tab">Next</a></li>
</ul>

正如你所看到的那样，分页按钮可以让你带回一个标签并分别转发一个标签，而现在它们只是指向一个工作正常的标签，如果你只有两个标签，但我可能会我完成时大约有4个。我确信有一种明显而简单的方法可以使前一个和下一个按钮实际上与标签一起使用，我只是想不出来。任何帮助和/或建议将不胜感激。

这是bootstrap提供的选择以前处于活动状态和tab元素的下一个选项卡。但我不知道如何使它们发挥作用：

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

Answer 1

您需要使用Javascript来执行此操作。 HTML没有自动检测下一个或上一个选项卡的功能。

看一下jQuery，这是一些Bootstraps功能所必需的。您当然不需要使用jQuery来解决这个特定问题或影响，具体取决于您的技能水平和要求，您可以像任何现代浏览器支持一样使用常规Javascript，或者您可以更高级并使用更智能的Javascript框架来执行某些操作为你工作。

例如，请查看jQuery selectors和jQuery .children() function

修改

您在此处提供的默认Bootstrap解决方案并非旨在使下一个和上一个按钮起作用。它的作用是传递你点击包含data-toggle="tab"的所有链接的“e”，然后激活它。

您需要重写和修改该段代码。选择器是一个可能的解决方案的一部分，您可以选择所有选项卡，然后让jQuery确定它们所处的顺序。然后您可以使用Next按钮调用“next（）”和Back按钮“back（）”然后基本上将活动标签交换为-1或+1。

Answer 2

我在这里找到了一个如何使用引导标签添加分页的简洁示例： http://www.bootply.com/60206

希望这有帮助！

Bootstrap分页和选项卡式元素

2 个答案: