AngularJS中点击前后按钮时如何激活对应Tab并高亮显示

我在AngularJS应用里实现了3个Tab，点击Tab本身时能正常高亮激活，但在Tab内容区添加了上一页/下一页按钮后，点击这些按钮无法让对应Tab自动高亮，请问该如何解决？

当前代码 #

Tab导航的HTML代码 #

<li ng-class="{ active: isActive('#one')}"><a data-toggle="tab" class="tab-txt-color" href="#one" ng-click="selectTab('fruits')">Fruits</a></li>
<li ng-class="{ active: isActive('#two')}"><a data-toggle="tab" class="tab-txt-color" href="#two" ng-click="selectTab('veggies')">Veggies</a></li>
<li ng-class="{ active: isActive('#three')}"><a data-toggle="tab" class="tab-txt-color" href="#three" ng-click="selectTab('decors')">Decors</a></li>

对应的JS逻辑 #

$scope.isActive = function (viewLocation) { 
    return viewLocation === $location.path();
};

内容区的前后按钮代码 #

<div>
  <!-- Veggies Tab的内容 -->
  <div class="col-md-12 col-lg-12" style="margin-top:20px;" align="right">
    <a href="#"><img src="core/static/images/previous-btn.gif" border="0" ng-click="selectTab('fruits')"></a>
    <a href="#"><img src="core/static/images/next-btn.gif" border="0" ng-click="selectTab('decors')"></a>
  </div>
</div>

解决方法 #

核心问题是点击按钮时仅调用了selectTab切换内容，但未同步更新$location.path()（导致isActive判断失效），也未触发Bootstrap Tab的激活状态。只需完善selectTab函数即可解决：

1. 完善selectTab函数，同步路径与Tab状态

// 建立Tab标识与路径、Tab ID的映射，方便后续维护
var tabMap = {
  'fruits': { path: '#one', tabId: '#one' },
  'veggies': { path: '#two', tabId: '#two' },
  'decors': { path: '#three', tabId: '#three' }
};

$scope.selectTab = function(tabKey) {
  var tabInfo = tabMap[tabKey];
  if (tabInfo) {
    // 更新location路径，让isActive判断生效，实现Tab高亮
    $location.path(tabInfo.path);
    // 触发Bootstrap Tab切换，激活对应Tab面板
    angular.element(tabInfo.tabId).tab('show');
  }
};

2. 优化按钮的默认跳转行为
   将按钮的<a href="#">改为<a href="javascript:void(0)">，避免点击时页面跳转到顶部：

<div class="col-md-12 col-lg-12" style="margin-top:20px;" align="right">
  <a href="javascript:void(0)"><img src="core/static/images/previous-btn.gif" border="0" ng-click="selectTab('fruits')"></a>
  <a href="javascript:void(0)"><img src="core/static/images/next-btn.gif" border="0" ng-click="selectTab('decors')"></a>
</div>

修改完成后，点击前后按钮时会同步更新路径并激活对应Tab，实现和点击Tab导航完全一致的高亮效果。

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