Bootstrap 4 tab.js 活动状态卡住
Posted
技术标签:
【中文标题】Bootstrap 4 tab.js 活动状态卡住【英文标题】：Bootstrap 4 tab.js active states stuck 【发布时间】：2018-02-05 03:59:24 【问题描述】：4 个 tab.js 示例中的 2 个在 CodePen 和本地 html 文件中对我不起作用。在“导航”示例中，下拉列表中的项目保持活动状态，单击方式后无法再次访问。垂直选项卡中的所有项目也是如此：https://codepen.io/DannyJoris/pen/MvqMEW
起初我认为提供的代码 sn-ps 中可能存在错误，但即使我使用检查器工具复制工作示例的标记，错误仍然存在。这让我觉得我包含 Bootstrap 文件的方式有问题。
这些是包含的 CDN 文件：
CSS：
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.8/popper.min.js https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js在 macOS 10.12.6、Chrome 60 和 Firefox 55 上测试
编辑：在使用 Bootstrap 3.3.7 时它确实有效：https://codepen.io/DannyJoris/pen/VzEZmw，所以它一定是 Bootstrap 中的一个错误。
【问题讨论】：
【参考方案1】：如果您的问题与垂直和药丸有关，我可能会建议添加以下处理程序：
$('.nav-pills > a').on('shown.bs.tab', function (e)
$(this).siblings().removeClass('active');
)
$('.nav-pills .dropdown').on('show.bs.dropdown', function (e)
$(this).siblings().find('.active').removeClass('active');
)
记住：ID 必须是唯一的（参考：myTab）
$('.nav-pills > a').on('show.bs.tab', function (e)
$(this).siblings().removeClass('active');
)
$('.nav-pills .dropdown').on('show.bs.dropdown', function (e)
$(this).siblings().find('.active').removeClass('active');
)#v-pills-tab
float: left;
display: inline-block;
width: 50%;
#v-pills-tabContent
float: left;
display: inline-block;
width: 50%;
.container
margin-top: 30px;
margin-bottom: 30px;
h2
margin: 15px 0;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- ul -->
<h2>ul</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">@fat</a>
<a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a>
</div>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">2...</div>
<div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">3...</div>
<div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">4...</div>
</div>
<!-- nav -->
<h2>nav</h2>
<nav class="nav nav-tabs" id="myTab1" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-expanded="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile">Profile</a>
<div class="dropdown">
<a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="nav-dropdown1-tab" href="#nav-dropdown1" role="tab" data-toggle="tab" aria-controls="nav-dropdown1">@fat</a>
<a class="dropdown-item" id="nav-dropdown2-tab" href="#nav-dropdown2" role="tab" data-toggle="tab" aria-controls="nav-dropdown2">@mdo</a>
</div>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">1...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">2...</div>
<div class="tab-pane fade" id="nav-dropdown1" role="tabpanel" aria-labelledby="nav-dropdown1-tab">3...</div>
<div class="tab-pane fade" id="nav-dropdown2" role="tabpanel" aria-labelledby="nav-dropdown2-tab">4...</div>
</div>
<!-- pills -->
<h2>pills</h2>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-expanded="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-expanded="true">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" id="pills-dropdown1-tab" href="#pills-dropdown1" role="tab" data-toggle="pill" aria-controls="pills-dropdown1">@fat</a>
<a class="dropdown-item" id="pills-dropdown2-tab" href="#pills-dropdown2" role="tab" data-toggle="pill" aria-controls="pills-dropdown2">@mdo</a>
</div>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">1...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">2...</div>
<div class="tab-pane fade" id="pills-dropdown1" role="tabpanel" aria-labelledby="pills-dropdown1-tab">3...</div>
<div class="tab-pane fade" id="pills-dropdown2" role="tabpanel" aria-labelledby="pills-dropdown2-tab">4...</div>
</div>
<!-- vertical -->
<h2>vertical</h2>
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">1...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">2...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">3...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">4...</div>
</div>
</div>【讨论】：
谢谢！虽然这个 sn-p 有效，但这不应该是引导程序的一部分吗？此外，更新了重复的 ID。 我没有答案。我可能只建议在需要时使用 js。我假设在 bostrap 的最终版本中，所有问题都将得到解决。 好的，感谢您的帮助。我提交了一个问题：github.com/twbs/bootstrap/issues/23708 2020 在此处使用 v4.4.1，当尝试让两个单独的菜单操作相同的选项卡窗格时，这仍然是一个问题。幸运的是，@gaetanoM 的解决方案有效！为我工作。谢谢楼主！【参考方案2】：看起来这在测试版中已解决：https://github.com/twbs/bootstrap/issues/23708#issuecomment-325263323
【讨论】：
以上是关于Bootstrap 4 tab.js 活动状态卡住的主要内容，如果未能解决你的问题，请参考以下文章
单击并处于活动状态时更改 Bootstrap 4.1 .btn-outline-primary 背景？
使用 Datatables.net 卡住的 Bootstrap 4 工具提示
Bootstrap 4工具提示使用Datatables.net卡住了