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

Question

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

是的。选项卡 A |选项卡 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>

Answer 1

根据引导程序的选项卡用法，每个选项卡都需要单独激活。

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/