change color current link page angular & css
Question
I am trying to amend my projetc which has been built so that there is a sub menu which appears on every page but is coded only once. I want to be able to add a highlight to the link for the page you are currently viewing, but I have to do this all in one html snippet The list renders fine, except that I can't get the current page to highlight. I have read some other posts about adding 'current link' formatting in a separate file but, unfortunately, I have to include all the code in this snippet.I have to do it by using HTML, CSS and angular and i'm new in learning angular
Given that, is what I am trying to achieve possible and if yes how can i make it work?
body { font-family: Source Sans Pro; } ul { float: left; width: 100%; padding: 0; margin: 0; list-style-type: none; } a { float: left; width: 6em; text-decoration: none; padding: 0.2em 0.6em; border-right: 1px solid white; } #navbar li a.current { background-color: #FFF; } li { display: inline; } #bl { background-color: #5a5a5a; color: yellow; } #or { background-color: #5a5a5a; color: yellow; } #gr { background-color: #5a5a5a; color: yellow; } #bl:hover, #or:hover, #gr:hover { background-color: #ff6900; } .left { float: left; }
<body ng-app="watch"> <div ng-controller="control"> <ul> <li><a href="#" ng-click = "person()" id="bl">Person</a></li> <li><a href="#" ng-click = "product()" id="or">Product</a></li> <li><a href="#" ng-click = "place()" id="gr">Place</a></li> </ul> </div> </body>
'use strict'; var mymodule = angular.module("watch", []); mymodule.controller("control",function($scope) { $scope.jsonerator = true; $scope.jsonerator2 = false; $scope.jsonerator3 = false; $scope.person = function() { $scope.jsonerator = true; $scope.jsonerator2 = false; $scope.jsonerator3 = false; } $scope.product = function() { $scope.jsonerator = false; $scope.jsonerator2 = true; $scope.jsonerator3 = false; } $scope.place = function() { $scope.jsonerator = false; $scope.jsonerator2 = false; $scope.jsonerator3 = true; } };
and this is my menu on jsfiddle: jsfiddle
Thanks
1 answers
solution1
1 ACCPTED 2015-06-06 02:04:23
Here's what I suggest, in addition to changing your CSS IDs to classes (and probably eliminating the IDs from your a tags). You may also find that you don't need as much code by using ng-class ; it will apply the class when the boolean statement after the colon is true. In this case, we're using your jsonerator $scope variables.
<li><a href="#" ng-click = "person()" id="bl" ng-class="{bl: jsonerator}">Person</a></li>
<li><a href="#" ng-click = "product()" id="or" ng-class="{or: jsonerator2}">Product</a></li>
<li><a href="#" ng-click = "place()" id="gr" ng-class="{gr: jsonerator3}">Place</a></li>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.