angular点亮当前菜单

weixin_30684743

于 2017-03-12 14:08:00 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/flower46273736/p/6537713.html

本文介绍如何使用AngularJS实现导航栏的高亮显示功能，通过设置活动状态的样式来区分当前选中的菜单项。具体实现了三个控制器，分别对应首页、项目页和个人联系页，每个页面都会更新当前激活的菜单项。

.menu ul li.active{background:#7e9811}

<ul>                
    <li ng-class="{active: currentId == 1}"><a ng-href="#/">文章</a></li>
        <li ng-class="{active: currentId == 2}"><a ng-href="#/project">项目</a></li>
    <li ng-class="{active: currentId == 3}"><a ng-href="#/contact">联系我</a></li>
</ul>

app.controller('blogController', function($scope) {         
       $scope.currentId = 1;    
});

app.controller('proController', function($scope) {          
    $scope.currentId = 2;       
});
app.controller('conController', function($scope) {  
    $scope.currentId  = 3;      
});

转载于:https://www.cnblogs.com/flower46273736/p/6537713.html