Bootstrap 5 中使用 Tab 标签创建中考和高考内容页面

以下是使用 Bootstrap 5 创建 2 个标签页的代码示例，分别为中考和高考：

<!-- 导航标签页 -->
<ul class='nav nav-tabs' id='myTab' role='tablist'>
  <li class='nav-item' role='presentation'>
    <button class='nav-link active' id='zhongkao-tab' data-bs-toggle='tab' data-bs-target='#zhongkao' type='button' role='tab' aria-controls='zhongkao' aria-selected='true'>中考</button>
  </li>
  <li class='nav-item' role='presentation'>
    <button class='nav-link' id='gaokao-tab' data-bs-toggle='tab' data-bs-target='#gaokao' type='button' role='tab' aria-controls='gaokao' aria-selected='false'>高考</button>
  </li>
</ul>

<!-- 标签页内容 -->
<div class='tab-content' id='myTabContent'>
  <!-- 中考标签页 -->
  <div class='tab-pane fade show active' id='zhongkao' role='tabpanel' aria-labelledby='zhongkao-tab'>
    <h1>中考内容</h1>
    <p>这里是中考标签页的内容。</p>
  </div>
  <!-- 高考标签页 -->
  <div class='tab-pane fade' id='gaokao' role='tabpanel' aria-labelledby='gaokao-tab'>
    <h1>高考内容</h1>
    <p>这里是高考标签页的内容。</p>
  </div>
</div>

在以上代码中，我们首先创建了一个 ul 元素，并在其中添加了 2 个 li 元素，分别代表中考和高考标签页。每个 li 元素包含一个 button 元素，用于在点击时切换到相应的标签页。

我们还创建了一个 div 元素，用于包含标签页内容。在其中，我们创建了 2 个 div 元素，分别代表中考和高考标签页的内容。每个 div 元素都有一个 id 属性，与相应的 button 元素的 data-bs-target 属性相对应。

注意，我们的中考标签页是默认显示的 (show active 类)，而高考标签页是隐藏的。这是因为我们在 ul 元素中的第一个 li 元素上添加了 active 类，以使中考标签页成为默认标签页。