Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   (Нужна помощь) Универсальный код подсвечивания ссылки (https://javascript.ru/forum/misc/71004-nuzhna-pomoshh-universalnyjj-kod-podsvechivaniya-ssylki.html)

kokossa 18.10.2017 14:04
(Нужна помощь) Универсальный код подсвечивания ссылки
 
Всем привет! Нужна помощь..
Есть код обычной подсветки
<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 18.10.2017 14:13
kokossa, ваш код можно переписать так:
$('.nav-menu li a[href="'+location.href+'"]').addClass('active');

Цитата:
Сообщение от kokossa
Задача сделать подсветку на кнопках, если адрес начинается с 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 18.10.2017 14:42
Цитата:
Сообщение от Nexus (Сообщение 467690)
kokossa, ваш код можно переписать так:
$('.nav-menu li a[href="'+location.href+'"]').addClass('active');



$('.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.
Почему-то такой вариант у меня не работает.

рони 18.10.2017 14:49
kokossa,
а так ?
$('.nav-menu li a[href*="www.site.ru/menu/"]').addClass('active');

Nexus 18.10.2017 14:58
Цитата:
Сообщение от 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');

kokossa 18.10.2017 18:18
Цитата:
Сообщение от Nexus (Сообщение 467700)
вероятно потому что ссылка не может начинаться с адреса сайта.
Ссылка начинается либо с протокола, либо с адреса страницы.
Какой-то из этих вариантов вам должен подойти:
$('.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 18.10.2017 19:16
мой вариант работает, но только для /today/ /yesterday/ ... для /today/news/ уже нет

ruslan_mart 18.10.2017 20:21
Селектор 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 18.10.2017 20:33
Цитата:
Сообщение от ruslan_mart (Сообщение 467723)
Селектор 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 19.10.2017 12:57
РЕШЕНИЕ ВОПРОСА!
 
Решилось таким образом

$(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');
        }
    });
});


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