Javascript Bootstrap 4.0选项卡不'；t切换选项卡窗格_Javascript_Twitter Bootstrap_Tabs

Javascript Bootstrap 4.0选项卡不'；t切换选项卡窗格

javascript twitter-bootstrap tabs

Javascript Bootstrap 4.0选项卡不'；t切换选项卡窗格,javascript,twitter-bootstrap,tabs,Javascript,Twitter Bootstrap,Tabs,我还有一个关于Bootstrap4中工作不正常的选项卡的问题。我试过很多来自官方文档、Stackoverflow等的例子。问题仍然是一样的因此，我需要使用内容切换选项卡。我从bootstrap4docs（）中提取了一段代码，将其放到我的页面上，并链接了所有css和js 问题是，选项卡正在正确切换，但是选项卡窗格没有改变。没有JS错误，正确的JS包含顺序，所有推荐版本的JS脚本。我不知道该怎么办 <!DOCTYPE html> <html lang="en">

我还有一个关于Bootstrap4中工作不正常的选项卡的问题。我试过很多来自官方文档、Stackoverflow等的例子。问题仍然是一样的

因此，我需要使用内容切换选项卡。我从bootstrap4docs（）中提取了一段代码，将其放到我的页面上，并链接了所有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>


引导盒








1.
2.
3.

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

非常感谢


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

引导盒








1.
2.
3.

你的href应该参考你的标签id，只有它可以工作

谢谢大家!！我也刚刚意识到这一点，但我怎么能做到呢？在源html中，所有的HREF都没有路径——正如您所写的那样。但在浏览器中，我看到在每个锚之前都添加了路径。问题是我的SilverStripe CMS默认情况下通过在锚之前添加路径来重写锚。禁用此选项修复了问题。问题是我的SilverStripe CMS在默认情况下通过在锚之前添加路径重写了锚。禁用此选项修复了该问题。