Bootstrap标签页添加关闭按钮：寻求合法替代嵌套按钮的方案

因为HTML规范确实不允许<button>嵌套<button>，所以我们可以把关闭按钮和tab切换元素放在同一个容器里，避免嵌套。下面是具体实现步骤：

1. 重构HTML结构 #

把每个tab项改成flex布局的容器，分开放置tab切换控件（用<a>标签保留Bootstrap的tab属性）和关闭按钮，彻底规避按钮嵌套问题：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item d-flex align-items-center" role="presentation">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">首页</a>
    <button type="button" class="btn-close ms-2" aria-label="关闭" data-tab-id="home-tab" data-content-id="home"></button>
  </li>
  <li class="nav-item d-flex align-items-center" role="presentation">
    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">个人资料</a>
    <button type="button" class="btn-close ms-2" aria-label="关闭" data-tab-id="profile-tab" data-content-id="profile"></button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">首页内容</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">个人资料内容</div>
</div>

这里用d-flex align-items-center让tab文本和关闭按钮垂直居中，ms-2给关闭按钮加一点左侧间距，同时给关闭按钮添加自定义属性data-tab-id和data-content-id，用来关联对应的tab切换元素和内容块。

2. 编写关闭逻辑的JavaScript #

给所有关闭按钮绑定点击事件，移除对应的tab项和内容块，同时处理激活状态切换（如果关闭的是当前激活的tab，自动切换到剩下的第一个tab）：

// 获取所有带关联属性的关闭按钮
const closeButtons = document.querySelectorAll('.btn-close[data-tab-id]');

closeButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    const tabId = this.getAttribute('data-tab-id');
    const contentId = this.getAttribute('data-content-id');
    const tabItem = this.closest('.nav-item'); // 获取整个tab项容器
    const tabContent = document.getElementById(contentId);
    const isActive = document.getElementById(tabId).classList.contains('active');

    // 移除对应的tab项和内容块
    tabItem.remove();
    tabContent.remove();

    // 如果关闭的是当前激活的tab，自动切换到剩余第一个tab
    if (isActive) {
      const remainingTabs = document.querySelectorAll('.nav-link');
      if (remainingTabs.length > 0) {
        const newActiveTab = new bootstrap.Tab(remainingTabs[0]);
        newActiveTab.show();
      }
    }
  });
});

3. 可选样式调整（按需修改） #

如果觉得关闭按钮的位置或大小不合适，可以自定义CSS调整：

.nav-item .btn-close {
  padding: 0.25rem 0.5rem; /* 调整按钮大小 */
  font-size: 0.875rem;
}

这样既符合HTML规范，又能实现你需要的关闭功能，同时保留Bootstrap标签页的原有交互。

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