第一次单击后不显示引导选项卡下拉菜单
[英]Bootstrap tab dropdown doesn't show after 1st click
问题描述
在下面的示例代码中，下拉选项卡内容在第一次查看后不显示。
(function($) { $(function() { $('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) { // Get the name of active tab var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text(); $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab); }); }); })(jQuery);
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min:css" rel="stylesheet"> </head> <body> <main class="main"></main> <hr> <p class="active-tab"><strong>Active Tab</strong>: <span></span></p> <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p> <hr> <ul class="nav nav-tabs" role="tablist" id="myTab"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#account-details" aria-controls="Account Details" role="tab" data-toggle="tab">Details</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li> <a href="#d1" data-toggle="tab">D1</a> </li> <li> <a href="#d2" data-toggle="tab">D2</a> </li> </ul> </li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <p>This is the home page</p> </div> <div role="tabpanel" class="tab-pane" id="account-details"> <p>Pane 1</p> </div> <div role="tabpanel" class="tab-pane" id="d1"> <p>Dropdown 1</p> </div> <div role="tabpanel" class="tab-pane" id="d2"> <p>Dropdown 2</p> </div> </div> </main> <.-- Page style--> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery:min.js"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle:min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
当活动选项卡成为下拉值之一 (D1/D2) 并且当您将活动选项卡更改为任何其他选项卡时，上Previous Tab:值变为空。
现在如果我再次 select 下拉 1，我看不到内容。
任何反馈表示赞赏。
谢谢你。
1 个解决方案
解决方案1
1 已采纳 2020-04-05 06:49:21
您正在混淆 Bootstrap v3 和 v4 导致此冲突，只需删除v4一个，（您的代码与v3兼容）
(function($) { $(function() { $('a[data-toggle = "tab"]').on('shown.bs.tab', function(e) { // Get the name of active tab var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text(); $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab); }); }); })(jQuery);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <:-- Main --> <main class="main"> <hr> <p class="active-tab"><strong>Active Tab</strong>: <span></span></p> <p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p> <hr /> <ul class="nav nav-tabs" role="tablist" id="myTab"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#account-details" aria-controls="Account Details" role="tab" data-toggle="tab">Details</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java<b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li> <a href="#d1" data-toggle="tab">D1</a> </li> <li> <a href="#d2" data-toggle="tab">D2</a> </li> </ul> </li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <p>This is the home page</p> </div> <div role="tabpanel" class="tab-pane" id="account-details"> <p>Pane 1</p> </div> <div role="tabpanel" class="tab-pane" id="d1"> <p>Dropdown 1</p> </div> <div role="tabpanel" class="tab-pane" id="d2"> <p>Dropdown 2</p> </div> </div> </main> <!-- End main -->
在引导中动态添加选项卡在导航后退后不显示选项卡窗格内容
[英]Dynamically adding a tab in bootstrap doesn't show tab-pane content after navigating away and back
jQuery Click-在第1页加载时不起作用，但是在重新加载页面时起作用
[英]jQuery Click - Doesn't work when page 1st loaded, but works if page is reloaded
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.