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

Question

我正在学习一些引导程序，我找到了 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 中的 tab-content 等效的内容。我现在正在寻找一些 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>