javascript - AngularJS : add Active effect and hover effect on li

Question

您好，我面临将 Li 设置为事件选项卡的问题，我已经添加了悬停效果，但如何添加事件选项卡？。我使用 Angular 的 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-click 将其设置为事件选项卡？ 提前致谢

更新:

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

这里是 Controller 上的 jS 文件

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

Answer 1

如果您需要切换元素上的类，而不仅仅是显示/隐藏它，您可以使用 ng-class而不是 ng-hide/ng-show。 ng-class 根据 $scope 变量的真值自动添加/删除类。您可以在 ng-click 上切换该真值(自动将 onClick 事件绑定(bind)到 DOM 节点，就像 on-mouseenter 绑定(bind) onMouseenter)。

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

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

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

ng-class="{'active': isActive, 'inactive': !isActive}"

这将按预期工作(在两个类之间切换)。

请注意，我使用 ng-init 将 bool 值初始化为 false。您还可以直接在 Controller 中初始化它 ($scope.isActive = false;)。