Bootstrap 导航选项卡/药丸仅在第一次交互时有效 [英] Bootstrap nav tabs/pills works only at first interaction

问题描述

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

Es.选项卡 A |选项卡 B |标签 C

如果我依次单击 A、B、C，它会起作用，但是如果我尝试重新单击其中任何一个，则不起作用.

每个标签只能使用一次.

 
<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>
<div class="tab-content"><div id="tab-a" class="tab-pane淡入活动">>!-- 内容选项卡A--></div><div id="tab-b" class="tab-pane淡入淡出"><!-- 内容选项卡B--></div><div id="tab-c" class="tab-pane淡入淡出"><!-- 内容选项卡C--></div>

解决方案

根据 Bootstrap 的 Tab 用法，每个选项卡都需要单独激活.

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

<script src="https://code.jquery.com/jquery-2.2.4.min.js"><;/脚本><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><!-- 导航标签 --><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 role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a><li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">消息</a><li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">设置</a><!-- 标签窗格--><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>

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

Toggable bootstrap nav tabs/pills work only on first interaction.

Es. TAB A | TAB B | TAB C

If I click A, then B, then C it works, but If I try to re-click any of them it doesn't work.

Every tab work only once.

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

解决方案

According to the Bootstrap's Tab usage, each tab needs to be activated individually.

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>

See: https://jsfiddle.net/edden87/80vrxtmj/

这篇关于Bootstrap 导航选项卡/药丸仅在第一次交互时有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！