如何仅用Bootstrap 5类实现无刷新切换页面内容？

你可以利用Bootstrap 5内置的Tab组件实现需求，无需编写任何自定义JavaScript代码——只需通过HTML属性和内置类完成绑定与控制。

核心实现逻辑 #

Bootstrap的Tab组件通过以下核心属性和类实现纯HTML内容切换：

• 触发元素（卡片）：添加data-bs-toggle="tab"（或data-bs-toggle="pill"，风格略有差异）和data-bs-target="#目标内容ID"，标记该元素为切换触发器并绑定目标内容容器
• 内容容器：使用tab-content类包裹所有可切换内容，每个内容面板添加tab-pane类，通过active show类标记默认显示的面板

完整代码示例 #

<!-- 确保已引入Bootstrap 5的CSS和JS文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="container mt-4">
  <!-- 作为切换触发器的卡片组 -->
  <div class="row g-3 mb-4">
    <div class="col-sm-6">
      <div class="card h-100 cursor-pointer" role="tab" data-bs-toggle="tab" data-bs-target="#div1">
        <div class="card-body text-center">
          <h5 class="card-title">显示内容1</h5>
          <p class="card-text text-muted">点击切换到第一个内容面板</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="card h-100 cursor-pointer" role="tab" data-bs-toggle="tab" data-bs-target="#div2">
        <div class="card-body text-center">
          <h5 class="card-title">显示内容2</h5>
          <p class="card-text text-muted">点击切换到第二个内容面板</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 内容切换容器 -->
  <div class="tab-content p-3 border rounded">
    <div id="div1" class="tab-pane fade active show">
      <h3>内容区域1</h3>
      <p>这是第一个内容容器的示例文本，点击右侧卡片可切换到内容2。</p>
      <ul>
        <li>支持任意HTML内容</li>
        <li>保留Bootstrap的响应式特性</li>
      </ul>
    </div>
    <div id="div2" class="tab-pane fade">
      <h3>内容区域2</h3>
      <p>这是第二个内容容器的示例文本，点击左侧卡片可切换回内容1。</p>
      <div class="alert alert-info">
        可直接嵌套Bootstrap的其他组件
      </div>
    </div>
  </div>
</div>

关键细节说明 #

• 给卡片添加自定义的cursor-pointer类（可自行定义或用Bootstrap的link类），让鼠标悬停时显示指针，提升交互体验
• fade类为内容切换添加淡入淡出动画，若不需要动画可移除该类
• 必须确保页面引入了Bootstrap 5的bootstrap.bundle.min.js（包含Popper依赖，Tab组件需要它），否则切换功能无法触发，但无需编写任何自定义JS代码
• role="tab"属性用于增强页面的可访问性，适配屏幕阅读器等辅助设备

内容的提问来源于stack exchange，提问作者Natalia