在下面的示例代码中，下拉选项卡内容在第一次查看后不会显示。
(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) 之一并且将事件选项卡更改为任何其他选项卡时，上一个选项卡: 值将变为空。
现在，如果我再次选择下拉菜单 1，我将看不到内容。
如有任何反馈，我们将不胜感激。
谢谢。
最佳答案
您混淆了 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 -->关于javascript - 第一次点击后 Bootstrap 选项卡下拉列表不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61038746/