如何点击List1内按钮切换至Bootstrap nav-tabs的List2标签页？

问题原因 #

你当前的"Go to List 2"链接只是普通锚点，没有触发Bootstrap标签页切换的专属机制，点击后只会跳转锚点，不会同步更新标签页的激活状态。

两种可行解决方法 #

方法1：利用Bootstrap内置data属性 #

直接修改链接标签，添加Bootstrap标签页切换所需的属性：

<a href="#list2" class="go-to" data-bs-toggle="tab" role="tab" aria-controls="list2">Go to List 2</a>

添加data-bs-toggle="tab"后，Bootstrap会自动识别这个元素为标签页触发器，点击时会切换到对应面板（此处href属性对应#list2面板），同时自动更新顶部导航按钮的active状态。

方法2：JavaScript手动触发 #

如果自定义样式或其他因素导致data属性失效，可通过JS手动调用Bootstrap的Tab API：

// 给按钮绑定点击事件
document.querySelector('.go-to').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认锚点跳转行为
  // 获取List2对应的导航触发器实例并切换
  const list2Tab = new bootstrap.Tab(document.getElementById('list2-tab'));
  list2Tab.show();
});

这段代码会手动触发List2标签页的切换逻辑，确保导航按钮和内容面板的状态同步更新。

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