изменить цвет текущая страница ссылки angular & css

Я пытаюсь внести изменения в свой проект, который был построен так, что есть подменю, которое появляется на каждой странице, но кодируется только один раз. Я хочу, чтобы иметь возможность добавить выделение в ссылку для страницы, которую вы просматриваете в данный момент, но я должен сделать это всего за один html-фрагмент Список отлично отображает, за исключением того, что я не могу выделить текущую страницу , Я прочитал несколько других сообщений о добавлении форматирования «текущей ссылки» в отдельный файл, но, к сожалению, я должен включить весь код в этот фрагмент. Я должен сделать это с помощью HTML, CSS и углового, и я новый в обучении угловойизменить цвет текущая страница ссылки angular & css

Учитывая, что я пытаюсь достичь возможного, и если да, то как я могу заставить его работать?

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; 
 
\t $scope.jsonerator3 = false; 
 
\t 
 
\t 
 
    $scope.person = function() { 
 
     $scope.jsonerator = true; 
 
     $scope.jsonerator2 = false; 
 
\t \t $scope.jsonerator3 = false; 
 
\t \t 
 
\t \t } 
 
\t 
 
\t 
 
\t $scope.product = function() { 
 
     $scope.jsonerator = false; 
 
     $scope.jsonerator2 = true; 
 
\t \t $scope.jsonerator3 = false; 
 
\t \t 
 
\t \t } 
 
\t 
 
\t 
 
\t $scope.place = function() { 
 
     $scope.jsonerator = false; 
 
     $scope.jsonerator2 = false; 
 
\t \t $scope.jsonerator3 = true; 
 
\t \t } 
 
}; 
 
\t

и это на jsfiddle мое меню: jsfiddle

Благодаря

источник

2015-06-05 ibrah05

Можем ли мы видеть JavaScript вашего контроллера? –

Извините, я просто добавил – ibrah05

Вот что я предлагаю в дополнение к изменению ваших идентификаторов CSS для классов (и, вероятно, исключение идентификаторов из ваших тегов). Вы также можете обнаружить, что вам не нужно столько кода, используя ng-class; он применит класс, когда логический оператор после двоеточия будет истинным. В этом случае мы используем переменные переменной jsonerator $.

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

источник

2015-06-06 02:04:23

Я получаю это, спасибо большое – ibrah05

изменить цвет текущая страница ссылки angular & css

ответ

Смежные вопросы