第一次單擊后不顯示引導選項卡下拉菜單
[英]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.