3

我在使用 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 个到我完成的时候。我确信有一种明显而简单的方法可以使上一个和下一个按钮实际与选项卡一起使用，我只是想不通。任何帮助和/或建议将不胜感激。

这就是引导程序提供的选择先前活动的选项卡和选项卡元素的下一个选项卡。但我不知道如何让它们工作：

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

2 回答 2

1

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

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

例如，看看jQuery 选择器和jQuery .children() 函数

编辑

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

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

于 2013-05-27T08:16:16.690 回答
0

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

希望这可以帮助！

于 2014-03-07T00:48:36.207 回答