I am wondering why I can't get the bootstrap tabs to correspond to links.(我想知道为什么我无法获得引导选项卡来对应链接。)
I've tried a bunch of solutions on stackoverflow, but the code structure all looks different than mine because I presume they're not bootstrap 4.(我已经在stackoverflow上尝试了很多解决方案，但是代码结构看上去都与我的不同，因为我认为它们不是bootstrap 4。)
Here is the html from Tabs Using Data Attributes(这是使用数据属性的选项卡中的html)
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
Using this JS from another post does actually change the link to include #page when clicking on tabs, but if i enter that address, it always goes back to the homepage:(在其他标签上使用此JS确实会在单击选项卡时将链接更改为包含#page，但是如果我输入该地址，它将始终返回首页：)
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');
} //add a suffix
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
I do apologize that this question has been asked in different iterations other places, but I have not seen the base question (ie, how to do this with the starter code from bootstrap) answered.(我确实很抱歉在其他地方以不同的迭代方式提出了这个问题，但是我没有看到基本的问题（即，如何使用引导程序中的启动程序代码来解决）。)
ask by J. Doe translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
