Javascript Bootstrap/JS功能显示某些选项卡信息

我目前正在一个全球搜索页面上工作。用户进行搜索时，将显示所有结果。但是，我希望用户能够单击某些选项卡来显示结果。它目前已启动。

所有

选项卡是当前唯一工作的选项卡，因为该类被设置为

活动

。

all

选项卡还包装了其他选项卡。如果我想显示

事件

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

然后我要检索的数据被包装在

all

div选项卡中，就像这里的

events\u选项卡一样


这将显示与搜索相关的事件。。。

我对使用bootstrap相当陌生。任何建议/提示都会大有帮助。提前谢谢
 至于是否希望所有选项卡都有嵌套选项卡，这有点不清楚。但是，关于引导选项卡HTML标记模式，您需要将
选项卡窗格
包装在
选项卡内容
包装中。另外，请确保包括jQuery以及引导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>