Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Сделать класс активным для всех путей URL (https://javascript.ru/forum/jquery/49589-sdelat-klass-aktivnym-dlya-vsekh-putejj-url.html)

eXTrEMe888 20.08.2014 09:09

Сделать класс активным для всех путей URL
 
Доброго времени суток, форумчане!
Собственно, столкнулся вот с такой задачей: на сайте есть меню, нужно для активного текущего пункта меню (для его подсветки) каждый раз устанавливать class="active". Эту проблему решил вот так:
jQuery(document).ready(function() {
    $('#navigation-main a[href="'+ location.pathname + '"]').addClass('active');
});

Тут все работает. Однако, вопрос вот в чем: если я, к примеру, перехожу в пункт меню "Новости" по адресу: http://example.com/news, то пункт меню подсвечивается и class="active" устанавливается без проблем, а что если я смотрю какую-то новость данного раздела с адресом: http://example.com/news/some-news - то в таком случае ссылка уже не подсвечивается. Выход - использование регулярки, или что посоветуете?

Заранее большое спасибо!:)

WorM32 20.08.2014 09:13

Почему класс ставит клиент, а не сервер во время генерации страницы?

ksa 20.08.2014 09:45

Цитата:

Сообщение от eXTrEMe888
по адресу: http://example.com/news, то пункт меню подсвечивается и class="active" устанавливается без проблем, а что если я смотрю какую-то новость данного раздела с адресом: http://example.com/news/some-news - то в таком случае ссылка уже не подсвечивается

Измени селектор...
http://jquery-docs.ru/Selectors/attr...attributevalue

ksa 20.08.2014 09:46

Цитата:

Сообщение от WorM32
Почему класс ставит клиент, а не сервер во время генерации страницы?

Не факт, что у ТСа вообще есть генерация...

eXTrEMe888 20.08.2014 09:59

Цитата:

Сообщение от WorM32 (Сообщение 326591)
Почему класс ставит клиент, а не сервер во время генерации страницы?

хм...а что необходимо сделать, чтобы класс ставил сервер? в bootstrap'е там вроде с подобными штуками проблем нет, однако в моем случае здесь обычная пользовательская верстка...
Цитата:

Сообщение от ksa (Сообщение 326592)

изменить на вот такой? (применить class="active" всем ссылкам, начинающимся с данной?):
jQuery(document).ready(function() {
    $('#navigation-main a[href^="'+ location.pathname + '"]').addClass('active');
});

пробовал - по-прежнему, безрезультатно...

WorM32 20.08.2014 10:37

eXTrEMe888,
В данном случае, по хорошему, сервер должен определить текущий раздел сайта и ставить класс нужному элементу. Как минимум это поможет избежать "моргания" элемента, в следствие отложенной установки класса.

eXTrEMe888 20.08.2014 10:59

Вы правы. На данный момент как раз-таки пункт меню выделяется "с опозданием", не так как хотелось бы (чтобы до/при загрузке страницы). А как и какими средствами лучше это сделать, не подскажете? Буду благодарен за помощь.

ksa 20.08.2014 11:27

Цитата:

Сообщение от eXTrEMe888 (Сообщение 326594)
изменить на вот такой? (применить class="active" всем ссылкам, начинающимся с данной?):
jQuery(document).ready(function() {
    $('#navigation-main a[href^="'+ location.pathname + '"]').addClass('active');
});

Тебе нужна только некая часть из location.pathname, неужели это не понятно из твоего же примера выше... Там есть только некая общая часть.

eXTrEMe888 20.08.2014 12:19

Цитата:

Сообщение от ksa (Сообщение 326611)
Тебе нужна только некая часть из location.pathname, неужели это не понятно из твоего же примера выше... Там есть только некая общая часть.

если честно - не совсем понял о чем ты. Да, само собой что правило class="active" должно распространяться не только на ссылки меню (они статичны), но и на ссылки, адрес которых начинается с этих самых ссылок меню. То, что ты процитировал - у меня все равно не работает. Вот я и пытаюсь выяснить, как лучше это сделать. Товарищ WorM32 посоветовал делать такие дела на сервере - опять же, как?))

ksa 20.08.2014 13:04

Цитата:

Сообщение от eXTrEMe888
Товарищ WorM32 посоветовал делать такие дела на сервере

Это самый лучший способ. :yes:


Часовой пояс GMT +3, время: 08:54.