当然可以实现啦！Bootstrap 5默认的标签页组件确实没自带点击已激活标签就关闭内容的功能，但咱们可以自己写点小代码来搞定这个需求~

下面是完整的实现示例，包含HTML结构和自定义JavaScript逻辑：

完整代码示例 #

HTML结构 #

<!-- 引入Bootstrap 5样式 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入Bootstrap 5的JS（包含Popper依赖） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">首页</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">个人资料</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">联系我们</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">首页内容区域</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">个人资料内容区域</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">联系我们内容区域</div>
</div>

自定义JavaScript逻辑 #

// 获取所有标签页按钮元素
const tabButtons = document.querySelectorAll('#myTab .nav-link');

// 给每个标签按钮绑定点击事件
tabButtons.forEach(button => {
  button.addEventListener('click', function(e) {
    // 判断当前点击的标签是否已经处于激活状态
    if (this.classList.contains('active')) {
      // 阻止Bootstrap默认的标签切换行为
      e.preventDefault();
      e.stopPropagation();
      
      // 获取当前标签对应的内容面板
      const targetPane = document.querySelector(this.getAttribute('data-bs-target'));
      
      // 移除标签的激活状态样式和ARIA属性
      this.classList.remove('active');
      this.setAttribute('aria-selected', 'false');
      
      // 移除内容面板的激活状态样式
      targetPane.classList.remove('show', 'active');
    }
  });
});

代码逻辑说明 #

1. 首先我们监听所有标签页按钮的点击事件；
2. 当点击的按钮已经带有active类（也就是当前处于激活状态的标签），就阻止Bootstrap默认的标签切换行为；
3. 然后手动移除标签按钮的active类和aria-selected="true"属性，同时移除对应内容面板的show和active类；
4. 这样就能实现点击已激活标签时，关闭对应内容面板，回到没有标签激活的状态啦。

备注：内容来源于stack exchange，提问作者Meek