如果未单击 Bootstrap 选项卡，如何检查 jQuery？

Question

我在 Bootstrap 中有选项卡：

<ul class="nav nav-tabs" role="tablist">
  <li>tab1</li>
  <li>tab2</li>
  <li>tab3</li>
  <li>tab4</li>
  <li>tab5</li>
</ul>

<p id="message"></p>

如何才能在没有单击任何选项卡时显示“请选择选项卡”消息？

我在选项卡下面做了一个<p id="message"></p>，我只需要在没有单击选项卡时插入消息，并在单击选项卡时删除消息，但我不知道如何检查。

Answer 1

对于 Bootstrap 选项卡，您还需要内容容器。在这种情况下，我会将消息 div 放入tab-contentdiv 中：

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
    <p id="message">Please select some tab</p>
</div>

...并使其隐藏，以防使用简单的 CSS 规则选择任何内容：

.tab-pane.active ~ #message {
    display: none;
}

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
    <p id="message">Please select some tab</p>
</div>

.tab-pane.active ~ #message {
    display: none;
}

演示： http://plnkr.co/edit/1VaF3NoTRK4X2pnd651G? p=info