Bootstrap 4 标签没有链接

Question

我想知道为什么我无法获得与链接相对应的引导程序选项卡。我在 stackoverflow 上尝试了很多解决方案，但代码结构看起来都与我的不同，因为我认为它们不是引导程序 4。

这是使用数据属性的选项卡中的 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>

在另一个帖子中使用这个 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;
})

我很抱歉已经在其他地方的不同迭代中提出了这个问题，但我没有看到基本问题（即，如何使用 bootstrap 中的启动代码执行此操作）回答。

Answer 1

你的标记很好。
这意味着您的控制台中可能有错误。请确保按以下顺序加载了这些脚本：

• jquery(.min).js
• popper(.min).js（在旧版本中曾经是 tether(.min).js）
• 引导程序(.min).js

有很多方法可以获得它们，但最安全的方法是转到并向下Bootstrap v4滚动到Bootstrap CDN。

您的标记 + 正确的脚本 =

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<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">Home</div>
    <div class="tab-pane" id="profile" role="tabpanel">Profile</div>
    <div class="tab-pane" id="messages" role="tabpanel">Messages</div>
    <div class="tab-pane" id="settings" role="tabpanel">Settings</div>
</div>

注意：您没有需要任何额外的javascript，使其工作，这一切都纳入bootstrap.js。