В моем примере кода ниже содержимое раскрывающейся вкладки не отображается после первого просмотра.
(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: становится пустым.
Теперь, если я снова выберу раскрывающийся список 1, я не вижу содержимого.
Любая обратная связь приветствуется.
Спасибо.