Bootstrap选项卡

选项卡

使用了 Bootstrap 的 Tab 组件来创建一个选项卡式的导航菜单。每个 <a> 标签都有一个 href 属性，该属性的值以 # 开头，表示它是一个内部链接，链接到页面上的一个元素。这个元素的 ID 应该与 href 属性的值（去掉 #）相同。

要控制每个选项卡显示的内容，你需要在页面上创建对应的元素，并设置它们的 ID 与选项卡的 href 属性相匹配。这些元素通常是 <div> 元素，它们包含了每个选项卡的内容。

<ul class="nav nav-pills nav-fill p-1" role="tablist">
                <li class="nav-item">
                  <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#hot-tabs-simple" role="tab" aria-controls="hot" aria-selected="true">最热讨论</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#new-tabs-simple" role="tab" aria-controls="new" aria-selected="true">最新发布</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#agg-tabs-simple" role="tab" aria-controls="agg" aria-selected="true">最高点赞</a>
                </li>
</ul>

将所有的选项卡内容都放在一个父元素中，并为每个选项卡内容设置 class="tab-pane fade"。然后，你可以使用 Bootstrap 的 JavaScript 插件来自动切换选项卡内容的显示和隐藏。

下面是一个例子：

<div class="tab-content">
  <div id="agg-tabs-simple" class="tab-pane fade show active">
    <!-- 这里是 "最高点赞" 选项卡的内容 -->
  </div>
  <div id="hot-tabs-simple" class="tab-pane fade">
    <!-- 这里是 "My Profile" 选项卡的内容 -->
  </div>
  <!-- 其他选项卡内容 -->
</div>

在这个例子中，所有的选项卡内容都放在一个 class="tab-content" 的 <div> 元素中。每个选项卡内容都是一个 class="tab-pane fade" 的 <div> 元素，它的 ID 与对应的选项卡的 href 属性相匹配。

当用户点击一个选项卡时，Bootstrap 的 JavaScript 插件会自动显示与该选项卡 href 属性相匹配的元素，并隐藏其他元素。这样，所有的选项卡内容都会占用同一个位置，每次只显示一个。