用于显示某些选项卡信息的 Bootstrap/JS 功能

Question

我目前正在开发一个全球搜索页面。用户进行搜索，显示所有结果。但是我希望用户也能够单击某些选项卡来显示结果。它目前是自举的。 all 选项卡是当前唯一有效的选项卡，因为它的类设置为 active。 all 选项卡还包含其他选项卡。如果我想显示Events，我会尝试举例说明

我首先将导航选项卡部分设置为这样...

<div class="search-tab">
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#all">All</a></li>
    <li><a data-toggle="pill" href="#events_tab">Events</a></li>
    <li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
    <li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
    <li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
  </ul>
</div>

然后我要检索的数据被包裹在 all div 标签中，就像这里的 events_tab 一样。

<div id="all" class="tab-pane fade in active">
  <div class="list-panel table-sort" id="events_tab">
    this will display the events related to the search...
  </div>
</div>

我对使用引导程序相当陌生。任何建议/提示都会有很大帮助。提前致谢！

Answer 1

您是否希望 All 具有嵌套选项卡有点不清楚。但是，关于 Bootstraps 选项卡 HTML 标记模式，您需要将 .tab-pane 包装在 .tab-content 包装器中。另外，请确保您包含 jQuery 以及 Bootstraps JS 包（在 jQuery 之后），以便可以使用 data- 属性。

为非嵌套选项卡和选项卡窗格更新了 HTML

<div class="search-tab">
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="tab" href="#all">All</a></li>
    <li><a data-toggle="pill" href="#events_tab">Events</a></li>
    <li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
    <li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
    <li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
  </ul>
</div>
<div class='tab-content'>
  <div id="all" class="tab-pane fade show active">
    all area
  </div> 
  <div id='events_tab' class='tab-pane fade'>
    events area
  </div>
</div>

这是一个小提琴，显示了没有嵌套标签的更新标记： https://jsfiddle.net/onuj90dz/

如果除了这些其他类别（事件、约会、电话、供应商）之外，您还想显示搜索结果，您可以将结果放在非tab 容器中。这个小提琴中的一个粗略的例子：https://jsfiddle.net/onuj90dz/1/