文档中的引导选项卡代码不起作用答案

【问题标题】：Bootstrap tabs code from documentation doesn't work文档中的引导选项卡代码不起作用
【发布时间】：2021-08-23 22:52:47
【问题描述】：

我正在学习 Bootstrap 5 选项卡，我从文档 (https://getbootstrap.com/docs/4.1/components/navs/#javascript-behavior) 中复制并粘贴了代码，但它没有按预期工作：当我按下一个选项卡时，它不会自行选择。我已经删除了自定义 .css 和 .js 文件，并尝试将代码放在 .container div 之外。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <title>Tabs</title>

  </head>

  <body>

    <div class="container">
        <!--this is the copy/paste from the bootstrap documentation and it does not work.-->
        <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="#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="#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="#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">
                <h1>Page 1</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci mollitia, quasi rerum corrupti fugit iste ipsam saepe ut enim dolore quaerat libero autem voluptate dicta, aliquam, consectetur provident doloremque expedita.</p>
            </div>
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <h1>Page 1</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci mollitia, quasi rerum corrupti fugit iste ipsam saepe ut enim dolore quaerat libero autem voluptate dicta, aliquam, consectetur provident doloremque expedita.</p>
            </div>
            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <h1>Page 1</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci mollitia, quasi rerum corrupti fugit iste ipsam saepe ut enim dolore quaerat libero autem voluptate dicta, aliquam, consectetur provident doloremque expedita.</p>
            </div>
          </div> <!--tab-content-->

    </div><!--container-->

    <script src="js/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
  </body>
  
</html>

当我尝试通过按另一个选项卡来更改内容时，顶部链接栏会更新，并在末尾添加#profile、#contact、#home。

【问题讨论】：

标签： html css bootstrap-5

【解决方案1】：

试试这个：

&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"&gt;

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 不起作用。

【讨论】：

你应该删除<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">没用