如何修改 Bootstrap 5 中的显示标签？
2022-01-02
273
我有一些代码在 Bootstrap 3.3 中运行良好：
$('#rides-tab').tab('show');
但在 Bootstrap5 中出现错误（ “tab”不是函数 ）。我尝试过
bootstrap.Tab.getInstance('#rides-tab').show();
但出现错误“ 无法读取 null 的属性（读取“show”） ”
这是选项卡的 html：
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" role="tablist" id="mytabs">
<li class="active"><a href="#panel-rides" id="rides-tab" role="tab" data-toggle="tab" aria-controls="rides-tab" aria-expanded="true"><i class="fa fa-calendar"></i><span> Calendar</span></a></li>
<li><a href="#panel-routes" id="routes-tab" role="tab" data-toggle="tab" aria-controls="routes-tab"><i class="fa fa-map-signs"></i><span> All routes</span></a></li>
<li><a href="#panel-setup" id="setup-tab" role="tab" data-toggle="tab" aria-controls="setup-tab"><i class="fa fa-wrench"></i><span> Lead a ride</span></a></li>
<li><a href="#panel-cafes" id="cafes-tab" role="tab" data-toggle="tab" aria-controls="cafe-tab"><i class="fa fa-coffee"></i><span> Coffee</span></a></li>
<li><a href="#panel-account" id="account-tab" role="tab" data-toggle="tab" aria-controls="account-tab"><i class="fa fa-user"></i><span> Account</span></a></li>
</ul>
</div>
如何修改代码以使其与 Bootstrap 5 兼容？
1个回答
您使用了错误的选择器，您需要 #navbar
$('button').click(function() {
$('#navbar').show();
});<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" role="tablist" id="mytabs">
<li class="active"><a href="#panel-rides" id="rides-tab" role="tab" data-toggle="tab" aria-controls="rides-tab" aria-expanded="true"><i class="fa fa-calendar"></i><span> Calendar</span></a></li>
<li><a href="#panel-routes" id="routes-tab" role="tab" data-toggle="tab" aria-controls="routes-tab"><i class="fa fa-map-signs"></i><span> All routes</span></a></li>
<li><a href="#panel-setup" id="setup-tab" role="tab" data-toggle="tab" aria-controls="setup-tab"><i class="fa fa-wrench"></i><span> Lead a ride</span></a></li>
<li><a href="#panel-cafes" id="cafes-tab" role="tab" data-toggle="tab" aria-controls="cafe-tab"><i class="fa fa-coffee"></i><span> Coffee</span></a></li>
<li><a href="#panel-account" id="account-tab" role="tab" data-toggle="tab" aria-controls="account-tab"><i class="fa fa-user"></i><span> Account</span></a></li>
</ul>
</div>
<button>Test</button>SKJ
2022-01-02