【发布时间】：2020-10-29 13:21:21
【问题描述】：
我正在尝试在 Bootstrap 4 的导航栏中使用 data-toggle="tab" 函数，但我无法弄清楚为什么我的选项卡没有改变。我用精简的代码做了一个codepen：https://codepen.io/xanabobana/pen/pobRxpx
<nav class="navbar navbar-expand-md p-0" role="navigation" id='header-nav'>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link main-nav active" id="home-nav" data-toggle="tab" href="#home-content" aria-controls="home-content" aria-selected="true">Home</a></li>
<li class="nav-item"><a class="nav-link main-nav" id="find-data-nav" data-toggle="tab" href="#find-data-content" aria-controls="find-data-content" aria-selected="false">View Inventory</a></li>
<li class="nav-item"><a class="nav-link main-nav" id="suggest-data-nav" data-toggle="tab" href="#suggest-data-content" aria-controls="suggest-data-content" aria-selected="false">Suggest a Data Rescue</a></li>
<li class="nav-item"><a class="nav-link main-nav" id="about-nav" data-toggle="tab" href="#about-content" aria-controls="about-content" aria-selected="false">About</a></li>
</ul>
</div>
</nav>
<div id="home-content" class="tab-pane fade show active" aria-labelledby="home-nav">
Home Content
</div>
<div id="find-data-content" class="tab-pane fade" aria-labelledby="find-data-nav">
find data content
</div>
<div id="suggest-data-content" class="tab-pane fade" role="tabpanel" aria-labelledby="suggest-data-nav">
suggest data content
</div>
<div id="about-content" class="tab-pane fade" role="tabpanel" aria-labelledby="about-nav">
About
</div>
【问题讨论】：