如何实现同页面内点击按钮切换至指定tab标签页？

实现方案 #

你使用的是Bootstrap的Tab组件，普通锚点跳转不会触发Tab的激活逻辑，且<button>内嵌套<a>属于HTML非法写法，自然不会生效。以下是两种可直接落地的实现方式：

方案1：无额外JS，直接用带按钮样式的a标签（推荐）

直接替换原来的button标签为a标签，复用Bootstrap的按钮样式和Tab原生触发属性，不需要写任何JS代码：

<!-- 替换原来的button部分 -->
<div class="col-md-12 text-right mt-4">
  <!-- 要跳转的目标tab id是#next就填#next，如果你实际是#note就改成href="#note" -->
  <a href="#next" class="btn btn-md btn-primary" data-toggle="tab" title="Add">Next</a>
</div>

方案2：绑定点击事件用JS触发Tab切换

如果你需要在切换Tab前执行其他逻辑（比如表单校验、数据提交），可以给按钮绑定点击事件，调用Bootstrap的Tab API实现切换：
首先给按钮加个唯一标识：

<div class="col-md-12 text-right mt-4">
  <button type="button" id="nextTabBtn" class="btn btn-md btn-primary" title="Add">Next</button>
</div>

然后加入JS代码（Bootstrap 3/4依赖jQuery，所以直接用jQuery写法即可）：

$('#nextTabBtn').on('click', function() {
  // 触发目标tab的激活事件，id对应你要跳转的tab pane的id
  $('.nav-tabs a[href="#next"]').tab('show');
  // 如果需要滚动到tab位置，可以再加下面这行
  // window.scrollTo(0, $('.nav-tabs').offset().top);
})

注意事项 #

• 确保目标tab的id和你跳转用的href/选择器对应，如果你实际需要跳转的tab id是#note，把上面代码里的#next替换为#note即可
• 不要在button内嵌套a标签，该写法不符合HTML规范，部分浏览器会直接解析为两个独立元素导致事件失效

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