Bootstrap 导航选项卡/药丸仅在第一次交互时有效答案

【问题标题】：Bootstrap nav tabs/pills works only at first interactionBootstrap 导航选项卡/药丸仅在第一次交互时有效
【发布时间】：2016-06-14 09:30:26
【问题描述】：

可切换的引导导航选项卡/药丸仅在首次交互时起作用。

Es。选项卡 |选项卡 B |制表符 C

如果我点击 A，然后是 B，然后是 C，它会起作用，但如果我尝试重新点击其中任何一个，它就不起作用。

每个标签只能使用一次。

              <ul class="nav nav-pills nav-justified">
                <li class="active"><a data-toggle="pill" href="#tab-a">TAB A</a></li>
                <li><a data-toggle="pill" href="#tab-b">TAB B</a></li>
                <li><a data-toggle="pill" href="#tab-c">TAB C</a></li>
              </ul>

              <div class="tab-content">
                <div id="tab-a" class="tab-pane fade in active"><!-- Content tab A--></div>
                <div id="tab-b" class="tab-pane fade"><!-- Content tab B--></div>
                <div id="tab-c" class="tab-pane fade"><!-- Content tab C--></div>
              </div>

【问题讨论】：

它适用于我（除了你应该将“tab.c”更改为“tab-c”）
它必须正常工作，但在自定义 Wordpress 主题中对我不起作用。我不知道为什么。
你上传你的主题了吗？如果没有，我不确定我能帮忙

标签： css twitter-bootstrap tabs navigation

【解决方案1】：

根据Bootstrap's Tab usage，每个标签都需要单独激活。

jQuery('a').click(function(e) {
  e.preventDefault()
  $(this).tab('show')
})

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>
    </li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
    </li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>
    </li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">a</div>
    <div role="tabpanel" class="tab-pane" id="profile">b</div>
    <div role="tabpanel" class="tab-pane" id="messages">c</div>
    <div role="tabpanel" class="tab-pane" id="settings">d</div>
  </div>
</div>

见：https://jsfiddle.net/edden87/80vrxtmj/

【讨论】：