javascript - Bootstrap 分页和标签元素

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 提供的选择先前事件的选项卡和选项卡元素的下一个选项卡的功能。但我不知道如何让它们工作:

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

Answer 1

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

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

例如，看一下 jQuery selectors和 jQuery .children() function

编辑

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

您将需要重写和修改那段代码。选择器是一个可能的解决方案的一部分，您可以在其中选择所有选项卡，然后让 jQuery 确定它们的顺序。然后您可以让下一步按钮调用“next()”和返回按钮“back()”然后基本上将事件选项卡交换为 -1 或 +1。