Bootstrap 4.0 选项卡不切换选项卡窗格答案

【问题标题】：Bootstrap 4.0 tabs don't switch the tab panesBootstrap 4.0 选项卡不切换选项卡窗格
【发布时间】：2018-12-23 05:03:06
【问题描述】：

我还有一个关于 Bootstrap 4 中工作不正常的选项卡的问题。我已经尝试了很多来自官方文档、* 和其他文档的示例。问题还是一样。

所以，我需要用内容切换标签。我从 Bootstrap 4 文档 (https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior) 中获取了一个代码，将它放到我的页面上并链接了所有的 css 和 js。

问题在于标签切换正常，但标签窗格没有改变。没有 JS 错误，正确的 js 包含顺序，所有推荐的 js 脚本版本。我不知道该怎么办。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Case</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="/site/signup/advertiser#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="/site/signup/advertiser#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="contact-tab" data-toggle="tab" href="/site/signup/advertiser#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1</div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">2</div>
                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">3</div>
            </div>
        </div>

        <script type="application/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script type="application/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </body>
</html>

请解释一下，这里出了什么问题。

非常感谢！

【问题讨论】：

问题是我的 SilverStripe CMS 默认通过在其前面添加路径来重写锚点。禁用此选项可解决问题。

标签： javascript twitter-bootstrap tabs

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Case</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home1" role="tab" aria-controls="home" aria-selected="true">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home1" role="tabpanel" aria-labelledby="home-tab">1</div>
                <div class="tab-pane fade" id="profile1" role="tabpanel" aria-labelledby="profile-tab">2</div>
                <div class="tab-pane fade" id="contact1" role="tabpanel" aria-labelledby="contact-tab">3</div>
            </div>
        </div>

        <script type="application/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script type="application/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </body>
</html>

您的 href 应该是指您的标签 ID 才可以工作。

【讨论】：

谢谢！我也刚刚意识到这一点，但是我该怎么做呢？在源 html 中，所有 href 都没有路径 - 正如您所写的那样。但在浏览器中，我看到在每个锚点之前添加的路径。
问题是我的 SilverStripe CMS 默认通过在其前面添加路径来重写锚点。禁用此选项可解决问题。