Выделить текущую страницу навигации пункта

У меня есть список плавающих страниц на моем сайте. В нем есть все заголовки страницы, и пользователь может с комфортом щелкнуть элементы навигации по странице, чтобы перейти к правильному значку страницы. Это также помогает значительно облегчить посетителю понимание структуры страницы и узнать, где на странице он/она.Выделить текущую страницу навигации пункта

Теперь, чтобы помочь пользователю понять, где на странице он/она, я хочу, чтобы нужный элемент в списке навигации страницы был выделен (добавление/удаление классов CSS) в зависимости от того, где находится пользователь.

Надеюсь, я хорошо объяснил. Как это делается? Благодаря!

- EDIT -

Спасибо Талгат за ваш ответ. Теперь у меня есть этот код:

<body ng-app="myApp">

Это мой контроллер:

<script type="text/javascript"> 
var app = angular.module("myApp", []); 
app.controller("validateCtrl", function($scope) { 
    $scope.isActive = {}; 
    $scope.isActive = function (state) { 
     return state === $state.current.name; 
    }; 
}); 
</script>

Это ссылка якоря из списка навигации к одной из экскурсий мы предлагаем под названием «Наследственное приключением»:

<a href="#ancestral-adventure" ng-class="{active: isActive('ancestral-adventure')}">Ancestral Adventure</a>

"ancestral-adventure" - это идентификатор заголовка. Возможно, я должен обернуть «Ancestral Adventure» -content в div вместо этого идентификатора? Это заголовок:

<h3 id="ancestral-adventure" name="ancestral-adventure">Ancestral Adventure</h3>

Как ваш угловой код, упомянутый name в $state.current.name, я добавил имя и имя-нг с таким же значением в заголовке, а также, на всякий случай.

С помощью этого кода элементы списка навигации не обновляются - ничего не происходит. Я убедился, что класс active работает для элементов списка и работает библиотека AngularJS. Что я могу сделать неправильно? Благодаря!

источник

2015-05-09 Marcus Edensky

вызывают ли щелчок хэш часть (или фрагмент часть, часть после '# ') в URL, чтобы обновить? Затем вы можете использовать [': target'] (https://developer.mozilla.org/en/docs/Web/CSS/:target) (в сочетании с' animation'). – Xufox

Или вы хотите, чтобы только элемент в списке навигации был выделен вместо фактического раздела на странице? – Xufox

Благодарим вас за комментарий, Xufox. Да, я хотел, чтобы элемент списка навигации был выделен, а не раздел самого содержимого страницы. –

Вы можете использовать услугу $state для проверки, что текущий элемент навигации активен или нет. Вот пример, чтобы понять это. Добавьте следующий код в контроллер:

$scope.isActive = function (state) { 
    return state === $state.current.name; 
};

и добавить в Templete:

<ul class="nav"> 
    <li ng-class="{active: isActive('route-name')}"> 
    </li> 
</ul>

active: isActive('route-name') задаст active класса к li тегу, если текущий элемент активен, то вы можете выделить этот элемент с CSS.

источник

2015-05-09 04:28:59

Спасибо за ваш ответ, Талгат! Это прекрасная возможность для меня продолжить изучение AngularJS. Я только начал изучать это, так что я настоящий новичок. Я обновил вопрос по моему текущему коду. –

Итак, из того, что я понимаю, вы хотите создать sth, например, bootstrap ScrollSpy Требуется вычисление положения вертикальной прокрутки относительно позиций элемента заголовка. Вы можете попробовать использовать одну из прокрутки spy для углового. Две первые результаты Google:

источник

2015-05-09 16:44:03

Выделить текущую страницу навигации пункта

ответ

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