Javascript AngularJS：在li上添加活动效果和悬停效果

你好，我面临的问题，使李作为活动标签，我已经添加了悬停效果，但如何添加活动标签？。我使用用户的ng show和ng hide更改li中的图标。这是我的密码

<li ng-mouseenter="show = true" ng-mouseleave="show = false" id="home">
        <img src="images/home.png" ng-hide="show" class="whiteClass" />
        <img src="images/home_h.png" ng-show="show" class="blackClass"/>
    </li>

---

如果需要在元素上切换类，不仅可以显示/隐藏它，还可以使用而不是

ng hide

/

ng show

ng类

根据

$scope

变量的真值自动添加/删除类。您可以在

ng click

上切换该真值（这会自动将

onClick

事件绑定到DOM节点，就像mouseenter上的

绑定
onMouseCenter
）


福

现在只需编写
.active{}
CSS规则

此外，您还可以在
ng类上添加多个规则

ng class=“{'active'：isActive，'inactive'：！isActive}”

这将按预期工作（在两个类之间切换）

请注意，我正在使用
nginit
将布尔值初始化为
false
。您也可以直接在控制器中初始化它（
$scope.isActive=false；
）。
完全相同。切换（
true
/
false
）在
ng click
上单击
变量，然后在
ng类中使用它来添加
活动的
类。@SergiuParaschiv:你能再解释一下吗？我尝试了一下，但没有同时使用这两种方法，如果悬停比活动不工作有效，而活动比悬停不工作有效…为什么要将
isActive
设置在
mouseEnter
上以添加悬停效果，然后使用
ishopped
，而不是
isActive
。不要在同一标志变量中混淆两种不同的功能。
<li  ng-mouseenter="liMouaeEnter()" ng-mouseleave="liMouseLeave()" id="issuesLi"  ng-click="navbarclick($event , issueTab)">
        <img src="images/issues.png" ng-class="{'active': !isActive, 'inactive': isActive}"/>
        <img src="images/issues_h.png" ng-class="{'active': isActive, 'inactive': !isActive}"/>

    </li>

  var navClickBool = false;
  $scope.liMouaeEnter = function(){
    $scope.isActive = false;
    this.isActive = true;
    navClickBool = false
   }

 $scope.navbarclick = function(event , template){
   $scope.isActive = false;  
   this.isActive = true;
   navClickBool = true

 }

 $scope.liMouseLeave = function(){
   if(navClickBool){
      return
   }
   this.isActive = false;
  }

<div ng-init="isActive = false">    
    <div ng-click="isActive = !isActive " ng-class="{'active': isActive}">
       <em>Foo</em>
    </div>
</div>