ng-class是一个判断是否给某一个元素添加类名的属性:

例如:下面是判断 是否添加 aHover 这个类名:

<ul class="nav fl w120 o">
    <li><a ng-click="homeClick()" ng-class="{true:'aHover',false:''}[homeHover]">首页</a></li>
    <li><a ng-click="selectedClick()" ng-class="{aHover: selectedHover == true}">精选</a></li>
    <li><a ng-click="channelClick()" ng-class="{aHover: channelHover}">频道</a></li>
    <li><a ng-click="collectClick()" ng-class="{aHover: collectHover}">我的收藏</a></li>
</ul>

具体JS:

myApp.controller('myAppController',['$scope',function($scope){
    $scope.homeHover = true;
    $scope.selectedHover = false;
    $scope.channelHover = false; 
    $scope.collectHover = false;
    $scope.homeClick = function(){
        $scope.homeHover = true;
        $scope.selectedHover = false;
        $scope.channelHover = false; 
        $scope.collectHover = false; 
    };
    $scope.selectedClick = function(){
        $scope.homeHover = false;
        $scope.selectedHover = true;
        $scope.channelHover = false; 
        $scope.collectHover = false; 
    };
    $scope.channelClick = function(){
        $scope.homeHover = false;
        $scope.selectedHover = false;
        $scope.channelHover = true; 
        $scope.collectHover = false; 
    };
    $scope.collectClick = function(){
        $scope.homeHover = false;
        $scope.selectedHover = false;
        $scope.channelHover = false; 
        $scope.collectHover = true; 
    };
}]);

 

相关文章:

  • 2022-12-23
  • 2022-01-07
  • 2022-01-11
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-04-12
猜你喜欢
  • 2022-12-23
  • 2021-12-05
  • 2022-12-23
  • 2021-05-27
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案