html - 我的 Bootstrap 数据切换实现有什么问题？

问题描述

所以我正在尝试使用引导程序 4.2.1 实现数据切换。根据文档，我想出了以下代码：

<div class="container">
    <div class="row bottom-section position-relative">
      <ul class="nav nav-pills" role="tablist">
        <li class="nav-item">
          <a class="nav-link nav-team active text-center" id="team-tab" data-toggle="tab" data-target="#team" aria-controls="team" role="tab" aria-selected="true">Team</a>
        </li>
        <li class="nav-item">
          <a class="nav-link nav-individual text-center" id="individual-tab" data-toggl="tab" data-target="#individual" aria-controls="individual" role="tab" aria-selected="false">Individual</a>
        </li>
      </ul>
      <div class="bottom-section-content col-sm-12">
        <div class="tab-content">
          <div class="tab-pane active" id="team" role="tabpanel" aria-labelledby="team-tab"><p>asd</p></div>
          <div class="tab-pane" id="individual" role="tabpanel" aria-labelledby="individual-tab"><p>sad</p></div>
        </div>
      </div>
    </div>
  </div>

我不知道出了什么问题，它应该像这样工作。我是否缺少引导 js 的内容？

标签： htmltwitter-bootstrap

我使用了您的代码，发现如果您使用的是 4.1.3，则此实现不适用于您当前的 HTML。你必须将你的 JS 升级到 Bootstrap 4.2.1。

采用：https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js

@elveti 也是正确的，你拼错了data-toggle。

使用（4.2.1）的工作示例：https ://codepen.io/brooksrelyt/pen/zeNVxo

html - 我的 Bootstrap 数据切换实现有什么问题？

问题描述

解决方案

推荐阅读