Question

Toggable bootstrap导航标签/药片仅适用于首次互动。

居。 TAB A | TAB B | TAB 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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

请参阅：https://jsfiddle.net/edden87/80vrxtmj/

Bootstrap导航标签/药丸仅在首次互动时起作用

1 个答案: