angularjs 基于Angular 按钮的选项卡突出显示

vqlkdk9b 于 2023-02-11 发布在 Angular

关注(0)|答案(1)|浏览(168)

我的应用程序中有3个选项卡，如下所示：

<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();
  };
    

For above code, when any of the tab is clicked it gets highlighted.

但我有上一个和下一个按钮添加到上述标签的内容。我如何使各自的标签活动时，点击上一个按钮。

<div>
 .......
 ......
 ....(content of Veggies tab)
[End of this tab there are 2 buttons]

 <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>

请帮忙，先谢了!

angularjs

来源：https://stackoverflow.com/questions/75407095/tab-highlighting-based-on-buttons-in-angularjs

1条答案

按热度按时间

bvn4nwqk1#

我有一个答案，如果你需要的下一个和以前的行动应该工作的顺序。添加一个数组的标签与它的名称和一个变量来存储当前标签名称

$scope.tabs = ["fruits","veggies","decors"];
$scope.currentTab = "";

为"上一个"和"下一个"按钮单击添加另外2种方法

$scope.nextTab = function(){
    if($scope.currentTab == ""){
        $scope.selectTab(tabs[0]);
    }
    else {
        var index = $scope.tabs.indexOf($scope.currentTab);
        var nextIndex = ((index + 1) < $scope.tabs.length) ? (index+1) : 0;
        $scope.selectTab($scope.tabs[nextIndex]);
    }
}
$scope.prevTab = function() {
    if($scope.currentTab == ""){
        $scope.selectTab(tabs[0]);
    }
    else {
        var index = $scope.tabs.indexOf($scope.currentTab);
        var prevIndex = ((index == 0) ? ($scope.tabs.length - 1) : (index-1);
        $scope.selectTab($scope.tabs[prevIndex]);
    }
}

在selectTab方法中再添加一行以存储当前选项卡名称

$scope.selectTab = function(tab){
    //other functionalities

    //add this line
    $scope.currentTab = tab;
}

更新"下一步"和"上一步"按钮中的单击方法

<a href="#"><img src="core/static/images/previous-btn.gif"  border="0" ng-click="prevTab()"></a>
<a href="#"><img src="core/static/images/next-btn.gif"  border="0" ng-click="nextTab()"></a>

希望对你有帮助。

赞(0）回复(0）举报 2023-02-11

我来回答

angularjs 基于Angular 按钮的选项卡突出显示

1条答案

相关问题

热门标签

最新问答