您好,我面临将 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 将其设置为活动选项卡?
提前致谢
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>
这里是控制器上的 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;
}
如果您需要切换元素上的类,而不仅仅是显示/隐藏它,您可以使用ng-class https://docs.angularjs.org/api/ng/directive/ngClass代替ng-hide
/ng-show
. ng-class
根据a的真值自动添加/删除一个类$scope
多变的。您可以打开该真值ng-click
(自动绑定onClick
事件到 DOM 节点,就像on-mouseenter
binds 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
将我的布尔值初始化为false
。您也可以直接在控制器中初始化它($scope.isActive = false;
).
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)