Bootstrap 4导航栏标签未激活标签内容

时间：2018-02-22 21:54:56

标签： html5 twitter-bootstrap bootstrap-4

我正在学习一些小引导程序，我找到了一个3.3.5的navbar教程，可以让它正常工作。

    <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教程，但如果有人认为他们感觉特别好，请随意分享。我也很抱歉，如果这是一个非常基本的问题我是一个后端人，所以不熟悉这个前端内容的术语让搜索这个特殊问题相当令人沮丧。

3 个答案:

答案 0 :(得分：2)

您可以在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>

答案 1 :(得分：2)

选项卡在Bootstrap 3和4中的工作方式类似，仍然使用data-toggle="tab"。而不是使用in类来设置活动选项卡窗格，show类现在在Bootstrap 4中使用。

如果您无法激活navbar中的标签内容，原因很可能是相同的 as explained here。 nav 类必须包含在navbar-nav中才能使标签导航生效。

演示：https://www.codeply.com/go/7pjdI2heSU 

<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 nav">
            <a class="nav-item nav-link active" data-toggle="tab" href="#home">Home</a>
            <a class="nav-item nav-link" data-toggle="tab" href="#superman">Superman</a>
            <a class="nav-item nav-link" data-toggle="tab" href="#batman">Batman</a>
            <a class="nav-item nav-link" data-toggle="tab" href="#flash">Flash</a>
            <a class="nav-item nav-link" data-toggle="tab" href="#kidflash">Kid Flash</a>
        </div>
    </div>
</nav>

答案 2 :(得分：0)

就我而言，我正在使用bootstrap.js 4.5.2版，而navbar-nav尚无法正常工作。 我认为该问题与解决方案中使用的bootstrap.css版本有关。 与bootstrap.css以前的版本相比，它们在in和nav类中有轻微的变化。

在最新版本的bootstrap.css中，in类已更改为show

我通过以下方式完整地解决了这个问题

  1. 将bootstrap.css中的.show类更新为.show { opacity: 1 !important; display: block !important; }

2。通过添加in或active类来更改HTML或js文件

$('.classofthe-tab').on("click", function () {
    $('.tab-pane').addClass('in');
    $(".nav").find(".active").removeClass("active");
    $(this).parent().addClass("active");
});
相关问题
最新问题