请求实现点击页面按钮激活指定.nav-tabs标签页的技术方案

没问题，既然你用的是Bootstrap的nav-tabs组件，咱们直接用它自带的Tab API就能搞定，不用自己折腾复杂逻辑。下面是具体的实现步骤：

1. 补全触发按钮的代码 #

给你的触发按钮加个唯一标识（比如ID），方便后续绑定点击事件，修改后的代码可以是这样：

<div class="panel-body panel-primary">
  <h4>System Manager</h4>
  <p></p>
  <a href="#service-one" id="switchToServiceTab" class="btn btn-primary">切换到系统管理标签页</a>
</div>

2. 编写jQuery点击事件逻辑 #

在页面的<script>标签里（或者你的外部JS文件中）添加这段代码，利用Bootstrap的tab('show')方法激活目标标签页：

$(document).ready(function() {
  // 给按钮绑定点击事件
  $('#switchToServiceTab').click(function(e) {
    e.preventDefault(); // 阻止a标签默认的锚点跳转，避免页面不必要的滚动
    // 定位到目标标签页的链接，调用show方法激活它
    $('#myTab a[href="#service-one"]').tab('show');
  });
});

逻辑说明 #

• e.preventDefault()：因为你的触发元素是<a>标签，默认会触发锚点跳转行为，加上这行可以避免页面突然滚动到标签页区域的问题。
• $('#myTab a[href="#service-one"]').tab('show')：这行代码会精准定位到#myTab下指向#service-one的标签页链接，调用Bootstrap内置的tab('show')方法后，会自动给对应的<li>标签加上active类，同时显示对应的tab内容面板，完全贴合Bootstrap组件的运行规范。

额外优化方案：用按钮代替a标签 #

如果你的触发元素不需要是<a>，换成<button>会更省心，不用处理默认跳转逻辑：

<div class="panel-body panel-primary">
  <h4>System Manager</h4>
  <p></p>
  <button id="switchToServiceTab" class="btn btn-primary">切换到系统管理标签页</button>
</div>

对应的JS代码可以去掉e.preventDefault()，简化成这样：

$(document).ready(function() {
  $('#switchToServiceTab').click(function() {
    $('#myTab a[href="#service-one"]').tab('show');
  });
});

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