Question

我在VS Code中本地工作并尝试让Bootstrap标签工作。我正在使用Bootstrap 4.我已经尝试过几个例子和不同的方法来做这件事无济于事。我是一个很擅长开发的人，所以我不会假装知道这一切＆＃34; :) 希望通过查看我的代码，做了很多这样做的人会去＃34;你走了！你的遗忘.......

这是我的.html文件中的代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Tabs</title>
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <link rel="stylesheet" href="./twitch.css">
        <script src="./js/jquery-3.2.1.min.js"></script>
        <script src="./twitch.js" type="text/javascript"></script>
    </head>
    <body>
       <div class="container">
            <ul class="nav nav-tabs">
                <li>
                    <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
                </li>
                <li>
                    <a class="nav-link" href="#featured" role="tab" data-toggle="tab">Featured</a>
                </li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">Home Info</div>
                <div role="tabpanel" class="tab-pane" id="featured">Featured Info</div>
            </div>
       </div>
    </body>
</html>

感谢您的帮助！

Answer 1

我认为您忘记包含bootstrap js文件。

来自文档：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer 2

感谢您的帮助！我添加了对引导程序JS的引用，这些选项卡现在似乎正在运行！非常感谢伊万！

以下是正在使用的代码！

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Twitchi Feed</title>
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <link rel="stylesheet" href="./twitch.css">
        <script src="./js/jquery-3.2.1.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <script src="./twitch.js" type="text/javascript"></script>
    </head>
    <body>
       <div class="container">
            <ul class="nav nav-tabs">
                <li>
                    <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
                </li>
                <li>
                    <a class="nav-link" href="#featured" role="tab" data-toggle="tab">Featured</a>
                </li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">Home Info</div>
                <div role="tabpanel" class="tab-pane" id="featured">Featured Info</div>
            </div>
       </div>
    </body>
</html>

Bootstrap选项卡 - 单击选项卡时不显示内容

2 个答案: