AngularJS：加积极的作用，并悬停在李效 [英] AngularJS : add Active effect and hover effect on li

问题描述

您好，我面临的问题，以李为活动选项卡中，我已经添加悬停效果，但如何将Active标签？我用户角度的NG-节目和NG隐藏更改李图标。这里是我的code

 ＆LT;李NG-的mouseenter =秀=真正的NG-鼠标离开=秀=假ID =家＆GT;
        ＆LT; IMG SRC =图像/ home.pngNG隐藏=秀类=whiteClass/＆GT;
        ＆LT; IMG SRC =图像/ home_h.pngNG秀=秀类=blackClass/＆GT;
    ＆LT; /李＆GT;
 

我怎样才能使它作为有效利用标签纳克点击？
在此先感谢

更新：

 ＆LT;李NG-的mouseenter =liMouaeEnter（）NG-鼠标离开=liMouseLeave（）ID =issuesLiNG点击=navbarclick（$事件，issueTab） ＆GT;
        ＆LT; IMG SRC =图像/ issues.pngNG-CLASS ={'积极'：isActive，无效：isActive}/＆GT;
        ＆LT; IMG SRC =图像/ issues_h.pngNG-CLASS ={'积极'：isActive，无效：isActive}/＆GT;    ＆LT; /李＆GT;
 

下面JS控制器文件

  VAR navClickBool = FALSE;
  $ scope.liMouaeEnter =功能（）{
    $ scope.isActive = FALSE;
    this.isActive = TRUE;
    navClickBool = FALSE
   } $ scope.navbarclick =功能（事件，模板）{
   $ scope.isActive = FALSE;
   this.isActive = TRUE;
   navClickBool =真 } $ scope.liMouseLeave =功能（）{
   如果（navClickBool）{
      返回
   }
   this.isActive = FALSE;
  }
 

解决方案

如果您需要切换一个元素类，不仅显示/隐藏它，你可以使用的纳克级而不是 NG-隐藏 / 纳克-show 。 纳克级自动添加/删除基于一个 $范围变量的真值的类。您可以打开 NG单击真值（自动绑定的onClick 事件到DOM节点，就像上的mouseenter 绑定 OnMouseEnter在）。

 ＆LT; D​​IV NG-的init =isActive =假＆GT;
    ＆LT; D​​IV NG点击=isActive = isActive！NG-CLASS ={'积极'：isActive}＆GT;
       ＆LT;环境监察及GT;富＆LT; / EM＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

现在只需要编写。主动{} CSS规则。

此外，您还可以在纳克级添加多个规则

纳克级={'积极'：isActive，无效：isActive}

，这将如预期（这两个类之间进行切换）。

请注意，我使用 NG-INIT 来初始化我布尔值，假。您也可以直接在控制器初始化（ $ scope.isActive = FALSE; ）。

Hello I am facing problem to make Li as Active tab, I already add hover effect but How to add Active tab?. I user Angular's ng-show and ng-hide to change icon in li. Here is my code

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

How can i make it as active tab using ng-click?? Thanks in advance

Update :

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

Here jS file on controller

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

解决方案

If you need to toggle a class on an element, not only show/hide it, you can use ng-class instead of ng-hide/ng-show. ng-class automatically adds/removes a class based on the truth value of a $scope variable. You can toggle that truth value on ng-click (that automatically binds the onClick event to the DOM node, just like on-mouseenter binds onMouseenter).

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

You now only have to write the .active { } CSS rule.

Also, you can add multiple rules on ng-class

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

and this will work as expected (switching between the two classes).

Note that I'm using ng-init to initialize my Boolean to false. You can also initialize it directly in the controller ($scope.isActive = false;).

这篇关于AngularJS：加积极的作用，并悬停在李效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！