如何在bootstrap 3中使用nav-tabs制作下拉内容？

Question

我使用bootstrap nav-tabs（垂直药丸）。我想这样做 - 当我点击标签时，这个标签的内容正好落在这个标签下（而不是其他地方），如this

Answer 1

然后，您正在寻找的Bootstrap功能称为 Accordion 或 Collapse ，而不是Nav-Tabs。

以下是bootstrap文档中可用的链接。除了课程jquery.min.js'，bootstrap.js和bootstrap.css之外，您不需要任何额外的插件来完成这项工作。

重要提示： jquery.min.js应在bootstrap.js之前加载。

http://getbootstrap.com/javascript/#collapse

以下是包含所需库的基本Accordion example。

希望它有所帮助： - ）

Answer 2

来自the Bootstrap docs：

  

Bootstrap中可用的导航具有共享标记，从基础.nav类开始，以及共享状态。交换修饰符类以在每种样式之间切换。

     

使用选项卡面板的导航需要JavaScript选项卡插件

     

对于具有可列表区域的标签，您必须使用标签JavaScript插件。标记还需要额外的role和ARIA属性 - 有关详细信息，请参阅插件的示例标记。

     

将导航用作可导航的

     

如果您使用导航栏提供导航栏，请确保将role="navigation"添加到<ul>的最合乎逻辑的父容器中，或者将<nav>元素包裹在整个导航。不要将角色添加到<ul>本身，因为这会阻止它被辅助技术宣布为实际列表。

Answer 3

我找到了解决方案。如果有人也有这个问题，请检查bootstrap手风琴

accordion

就是这样！