单按钮切换Tab问题求助：点击TAB按钮无法循环切换Home/Profile

问题描述 #

需求是通过单个TAB按钮实现面板切换：首次点击显示Profile面板，再次点击切回Home面板。但当前代码仅能切换到Profile，无法切回Home。

问题原因 #

原代码依赖隐藏的第二个标签页的激活状态触发切换逻辑。当切换到Profile后，可见TAB按钮的父元素不再处于激活状态，后续点击无法触发切换，导致无法切回Home面板。

解决方案 #

移除多余的隐藏标签页，直接通过可见按钮的点击事件切换两个面板的显示状态，利用Bootstrap的Tab API处理过渡效果和状态更新：

完整代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

<div class="wrapper">
  <div class="panel-heading">
    <ul class="nav nav-tabs">
      <li class="active">
        <a class="tab-bg" href="#" id="tab1" role="tab" aria-selected="true">TAB</a>
      </li>
    </ul>
  </div>
  <div class="panel-body">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="home-tab-pane">Home</div>
      <div class="tab-pane fade" id="profile-tab-pane">Profile</div>
    </div>
  </div>
</div>

.wrapper {
  width: 50%;
  border: solid #000 2px;
  margin: 0 auto;
}

.tab-bg {
  text-decoration: none;
  font-size: 2rem;
}

.tab-pane {
  padding: 50px;
  color: blueviolet;
  font-size: 1.5rem;
}

const tabButton = document.querySelector('#tab1');
const homePane = document.querySelector('#home-tab-pane');
const profilePane = document.querySelector('#profile-tab-pane');

tabButton.addEventListener('click', function(e) {
  e.preventDefault();
  
  // 切换到相反的面板
  if (homePane.classList.contains('show')) {
    bootstrap.Tab.getOrCreateInstance(profilePane).show();
  } else {
    bootstrap.Tab.getOrCreateInstance(homePane).show();
  }
});

关键修改说明 #

1. HTML结构简化：移除多余的空标签页元素，只保留一个可见TAB按钮，避免依赖隐藏元素的状态。
2. JS逻辑重构：每次点击按钮时检查当前激活的面板，直接切换到另一个面板，不再依赖标签页的激活状态。
3. Bootstrap API使用：利用Bootstrap的Tab组件API处理面板的显示和过渡效果，确保样式和无障碍属性正确更新。

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