(Нужна помощь) Универсальный код подсвечивания ссылки

[kokossa]

Всем привет! Нужна помощь..
Есть код обычной подсветки

<script>
$(document).ready(function(){
$('.nav-menu li a').each(function () {
        var location = window.location.href;
        var link = this.href; 
        if(location == link) {
            $(this).addClass('active');
        }
    });
});
</script>

Задача сделать подсветку на кнопках, если адрес начинается с www.site.ru/menu/..., а не соответствует урлу.

Подскажите как реализовать?

[Nexus]

kokossa, ваш код можно переписать так:

$('.nav-menu li a[href="'+location.href+'"]').addClass('active');

Задача сделать подсветку на кнопках, если адрес начинается с www.site.ru/menu/..., а не соответствует урлу.

Подскажите как реализовать?

$('.nav-menu li a[href^="www.site.ru/menu/"]').addClass('active');

https://api.jquery.com/attribute-starts-with-selector/

Ps. О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[kokossa]

$('.nav-menu li a[href="'+location.href+'"]').addClass('active');

Почему-то такой вариант у меня не работает.

[рони]

kokossa,
а так ?

$('.nav-menu li a[href*="www.site.ru/menu/"]').addClass('active');

[Nexus]

Почему-то такой вариант у меня не работает.

вероятно потому что ссылка не может начинаться с адреса сайта.
Ссылка начинается либо с протокола, либо с адреса страницы.
Какой-то из этих вариантов вам должен подойти:

$('.nav-menu li a[href^="http://www.site.ru/menu/"]').addClass('active');
$('.nav-menu li a[href^="https://www.site.ru/menu/"]').addClass('active');
$('.nav-menu li a[href^="/menu/"]').addClass('active');
$('.nav-menu li a[href^="menu/"]').addClass('active');

[kokossa]

$('.nav-menu li a[href^="http://www.site.ru/menu/"]').addClass('active');
$('.nav-menu li a[href^="https://www.site.ru/menu/"]').addClass('active');
$('.nav-menu li a[href^="/menu/"]').addClass('active');
$('.nav-menu li a[href^="menu/"]').addClass('active');

Все равно не работает, опишу полностью суть
Есть сайт с меню типа

<li><a href="/today/">24 часа</a></li>
					<li><a href="/yesterday/">Вчера</a></li>
					<li><a href="/week/">Неделя</a></li>
					<li><a href="/month/">Месяц</a></li>

но есть еще ссылки /today/news/toplic/
и тд со всеми меню, надо чтобы при любом просмотре по адресу
https://site.ru/today/news/topic/....
кнопка подсвечивалась, тоесть дописывался active
также /yesterday/news/topic/

код выше с http:// не работает, если просто подставлять /today/ то подсвечивает в любых случаях, даже просто на главной.

[kokossa]

мой вариант работает, но только для /today/ /yesterday/ ... для /today/news/ уже нет

[ruslan_mart]

Селектор a[href="ссылка"] в сафари работает с багами. Поэтому, советую лучше пробежаться по нодам:

$(function(){
    $('.nav-menu li a').each(function() {
        var location = window.location.href;
        var link = this.getAttribute('href'); 
        if(link.indexOf(location) === 0) {
            $(this).addClass('active');
        }
    });
});

[kokossa]

$(function(){
    $('.nav-menu li a').each(function() {
        var location = window.location.href;
        var link = this.getAttribute('href'); 
        if(link.indexOf(location) === 0) {
            $(this).addClass('active');
        }
    });
});

Не работает

[kokossa]

Решилось таким образом

$(document).ready(function () {
    var location = window.location.href;
   
    $('.nav-menu li').each(function () {
        var link = $(this).find('a').attr('href');
   
        if (location.indexOf(link) !== -1)
        {
            $(this).addClass('active');
        }
    });
});