html - Bootstrap 4 导航栏选项卡未激活选项卡内容

Question

我正在学习一些 Bootstrap ，我找到了 3.3.5 的导航栏教程，可以让它正常工作。

    <ul class="nav nav-pills">
  <li class="active"><a data-toggle="tab" href="#superman">Superman</a></li>
  <li><a data-toggle="tab" href="#batman">Batman</a></li>

  <!-- Dropdown menu item -->
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Flash
    <span class="caret"></span></a>
    <ul class="dropdown-menu">

      <!-- Disable a tab -->
      <li class="disabled"><a data-toggle="tab" href="#flash">The Flash</a></li>
      <li><a data-toggle="tab" href="#kidflash">Kid Flash</a></li>
    </ul>
  </li>
</ul>

<div class="tab-content">
  <div id="superman" class="tab-pane fade in active">
    <p>Superman is a fictional superhero appearing in American comic books published by DC Comics. </p>
  </div>
  <div id="batman" class="tab-pane fade">
    <p>Batman is a fictional superhero appearing in American comic books published by DC Comics. </p>
  </div>
  <div id="flash" class="tab-pane fade">
    <p>The Flash is a fictional superhero appearing in American comic books published by DC Comics. </p>
  </div>
  <div id="kidflash" class="tab-pane fade">
    <p>Kid Flash is a fictional superhero appearing in American comic books published by DC Comics. </p>
  </div>
</div>

当我意识到 4 是最新版本时，我认为最好学习 4。我可以让导航栏与 4 一起正常工作，但我找不到关于如何实际更改显示内容的文档按下不同的选项卡。我目前的代码如下。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Augma Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#home">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#menu">Menu</a>
      <a class="nav-item nav-link" href="#colors">Colors</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

我正在寻找与 3.3.5 中的选项卡内容等效的内容。我现在正在寻找一些 youtube 教程，但如果有人觉得特别好，请随时分享。另外，如果这是一个非常基本的问题，我深表歉意，我是一名后端人员，因此不熟悉这种前端内容的行话使得搜索这个特定问题相当令人沮丧。

Answer 1

您可以在 Bootstrap 4 中使用列表组 (list-group) 或标签 (nav-tabs)。

单击下面的“运行代码片段”按钮查看带有选项卡的示例:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<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="#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">home tab</div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">profile tab</div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">contact tab</div>
    </div>
</div>

点击下面的“运行代码片段”按钮查看列表组示例:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
    <div class="row">
        <div class="col-4">
            <div class="list-group" id="list-tab" role="tablist">
                <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
                <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
                <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
                <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
            </div>
        </div>
        <div class="col-8">
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">home home home</div>
                <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">profile profile profile</div>
                <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">messages messages messages</div>
                <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">settings settings settings</div>
            </div>
        </div>
    </div>
</div>