Javascript 引导分页和选项卡式元素

我在一个选项卡式元素中有一些内容，使用引导，如下所示：

<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>

---

要做到这一点，您需要Javascript。HTML没有自动检测下一个或上一个选项卡的功能

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

例如，查看和

编辑

您在那里提供的默认引导解决方案并不是为了让“下一个”和“上一个”按钮正常工作。它所做的是传递您单击的包含

数据toggle=“tab”

的所有链接的“e”，并激活它

---

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

我在这里找到了一个关于如何使用引导选项卡添加分页的简洁示例：

---

希望这有帮助

我想它需要某种类型的javascript，但我真的不确定在我的函数中做什么。如果你想使用jQuery，使用jQuery选择器将为你做很多工作。我想编辑我的答案，帮你找出你需要什么，但不幸的是我现在没有足够的时间。

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