При оформлении любого сайта становиться вопрос и стилизации меню навигации. И так уж повелось, что модно делать так, чтобы ссылка на текущую страницу выделялась особым цветом или бекграундом.
Реализовать такое проще всего при помощи js скрипта с использованием jQuery.
Есть две возможные ситуации.
1. Вам нужно добавить класс active к ссылке на текущую страницу.
2. Вам нужно добавить класс active к элементу списка, который содержит ссылку на данную страницу.
В первом случа все вообще просто:
<script type="text/javascript" charset="utf-8">
jQuery(function() {
jQuery('.primary-nav a').each(function() {
if (jQuery(this).attr('href') === window.location.pathname) {
jQuery(this).addClass('active');
}
});
});
Вам нужно просто перебрать элементы навигации, сравнивая ссылки тегов «а» с текущим URL.
Во втором же случае, все несколько сложнее. Хотя не на много. Я бы сказал: «не так очевидно».
<script type="text/javascript" charset="utf-8">
jQuery(function() {
jQuery('.primary-nav li').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('active');
}
});
});
Тот же перебор элементов меню навигации. Только перебор тегов li. Сравнение производиться путем поиска в теге li сылки и сравнения её пути с текущим.
