使用angularJs实现tab切换

最近的项目客户要求使用angularJs,不得不说angularJs用起来确实方便。但是有些功能事件不会的话还是会用jq。其实在使用angularJs的时候，能不用jq最后还是不用jq，以免混乱、冲突。
闲话少叙，项目中有tab切换的需要，这很常见。若是不引用angularJs 的话，一般是自己用jq手写，也有人引用tab插件。但是引用了angularJs之后，怎么用angularJs实现tab切换呢？一下是其中一种方法：
1、HTML代码

<ul class="ul_75">
        <li ng-class="{on:isActive(0,'funds')}" ng-click="func(1)">tab_1</li>
        <li ng-class="{on:isActive(1,'funds')}" ng-click="func(2)">tab_2</li>
        <li ng-class="{on:isActive(2,'funds')}" ng-click="func(3)">tab_3</li>
        <li ng-class="{on:isActive(3,'funds')}" ng-click="func(4)">tab_4</li>
    </ul>

2、js代码：

$scope.func = function(param){//tab切换的事件
	 if(param == 1){
	     $scope.currentTab = 0;
	 }else if(param == 2){
	     $scope.currentTab = 1;
	 }else if(param == 3){
	     $scope.currentTab = 2;
	 }
}

$scope.isActive = function(pNum,params){//判断是否选中当前tab
    if(params == 'funds'){
        return pNum == $scope.currentTab;
    }else if(params == 'equity'){
        return pNum == $scope.currentTab2;
    }else if(params == 'stocks'){
        return pNum == $scope.currentTab3;
    }

};

分析：on是 li 的选中状态的样式，根据ng-class表达式的值，决定该 li 是不是有on这个类。
希望本文能给你带来帮助，谢谢！

个人微信公众号：侦探小禾子，闲聊育儿生活星座塔罗牌，野生法考通过者免费法律咨询，欢迎关注！