我正在尝试使用下拉菜单显示标签。选项卡工作正常,但错误仍然存在,并且当我在下拉列表中选择选项卡菜单时,它没有关闭下拉菜单,但显示了相应的选项卡,并显示了错误。
<div class="dropdown">
<button class="btn dropdown-toggle dropdown-tabs" style="background-color: #fdcd3d; color: #000;" type="button" data-toggle="dropdown">Achievers
<span class="caret"></span></button>
<ul class="dropdown-menu" id="myTab" role="tablist">
<li id="#achiever" name="Achievers">
<a class="dropdown-link" name="#achiever" data-toggle="tab" href="#achiever" role="tab" aria-controls="home" aria-expanded="true">Achievers</a>
</li>
<li id="#articles" name="Articles">
<a class="dropdown-link" name="#articles" data-toggle="tab" href="#articles" role="tab" aria-controls="profile">Articles</a>
</li>
<li id="#bulletins" name="Bulletins">
<a class="dropdown-link" data-toggle="tab" role="tab" aria-controls="profile">Bulletins</a>
</li>
<li id="#events" name="Events">
<a class="dropdown-link" data-toggle="tab" href="#events" role="tab" aria-controls="profile">Events</a>
</li>
<li id="#jobs" name="Jobs">
<a class="dropdown-link" data-toggle="tab" href="#jobs" role="tab" aria-controls="profile">Jobs</a>
</li>
</ul>
</div>
我的js下拉菜单的代码
$(document).ready(function(){
$('.dropdown-menu > li > a').click(function(e){
var id = $(this).parent().attr('id');
var text = $(this).parent().attr('name');
// var tab = $('.tab-pane').attr('id');
e.preventDefault();
$('.dropdown-tabs').text(text);
if(id != null){
$('a[href="' + id + '"]').tab('show');
}
});
});
ID必须以a-z
或A-Z
开头,并且不能以#
开头。
然后在$('a[href="' + id + '"]').tab('show');
中,您需要更改为$('a[href="#' + id + '"]').tab('show');
$(document).ready(function(){
$('.dropdown-menu > li > a').click(function(e){
var text = $(this).text();
$('.dropdown-toggle').text(text);
$(this).tab('show');
$(this).parent().removeClass("active");
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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"></script>
<div class="dropdown">
<button class="btn dropdown-toggle" style="background-color: #fdcd3d; color: #000;" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Bulletins
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#bulletins_tab">Bulletins</a></li>
<li><a href="#events_tab">Events</a></li>
<li><a href="#jobs_tab">Jobs</a></li>
</ul>
</div>
<div class="tab-content">
<div id="bulletins_tab" class="tab-pane fade in active">
<h3>bulletins</h3>
</div>
<div id="events_tab" class="tab-pane fade">
<h3>events</h3>
</div>
<div id="jobs_tab" class="tab-pane fade">
<h3>jobs</h3>
</div>
</div>