Question

我想知道为什么我不能让引导标签对应链接。我在stackoverflow上尝试了一堆解决方案，但是代码结构看起来与我的不同，因为我认为它们不是bootstrap 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 。

您的标记+正确的脚本=

＆＃13;

<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>

＆＃13;

请注意，不需要任何额外的javascript才能使其正常工作，所有这些都包含在bootstrap.js中。

Answer 2

您只需要按照以下顺序将bootstrap.bundle.js以及jquery和bootstrap.js包括在内

jquery.min.js
bootstrap.min.js
bootstrap.bundle.min.js

Bootstrap 4选项卡没有链接

2 个答案: