Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.10.2017, 15:04
Новичок на форуме
Отправить личное сообщение для kokossa Посмотреть профиль Найти все сообщения от kokossa
 
Регистрация: 18.10.2017
Сообщений: 6

(Нужна помощь) Универсальный код подсвечивания ссылки
Всем привет! Нужна помощь..
Есть код обычной подсветки
<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/..., а не соответствует урлу.

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

Последний раз редактировалось kokossa, 18.10.2017 в 15:26.
Ответить с цитированием
  #2 (permalink)  
Старый 18.10.2017, 15:13
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 959

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.

Последний раз редактировалось Nexus, 18.10.2017 в 15:18.
Ответить с цитированием
  #3 (permalink)  
Старый 18.10.2017, 15:42
Новичок на форуме
Отправить личное сообщение для kokossa Посмотреть профиль Найти все сообщения от kokossa
 
Регистрация: 18.10.2017
Сообщений: 6

Сообщение от Nexus Посмотреть сообщение
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.
Почему-то такой вариант у меня не работает.
Ответить с цитированием
  #4 (permalink)  
Старый 18.10.2017, 15:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 21,401

kokossa,
а так ?
$('.nav-menu li a[href*="www.site.ru/menu/"]').addClass('active');
Ответить с цитированием
  #5 (permalink)  
Старый 18.10.2017, 15:58
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 959

Сообщение от 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');
Ответить с цитированием
  #6 (permalink)  
Старый 18.10.2017, 19:18
Новичок на форуме
Отправить личное сообщение для kokossa Посмотреть профиль Найти все сообщения от kokossa
 
Регистрация: 18.10.2017
Сообщений: 6

Сообщение от 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');
Все равно не работает, опишу полностью суть
Есть сайт с меню типа
<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/ то подсвечивает в любых случаях, даже просто на главной.
Ответить с цитированием
  #7 (permalink)  
Старый 18.10.2017, 20:16
Новичок на форуме
Отправить личное сообщение для kokossa Посмотреть профиль Найти все сообщения от kokossa
 
Регистрация: 18.10.2017
Сообщений: 6

мой вариант работает, но только для /today/ /yesterday/ ... для /today/news/ уже нет
Ответить с цитированием
  #8 (permalink)  
Старый 18.10.2017, 21:21
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,795

Селектор 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');
        }
    });
});
Ответить с цитированием
  #9 (permalink)  
Старый 18.10.2017, 21:33
Новичок на форуме
Отправить личное сообщение для kokossa Посмотреть профиль Найти все сообщения от kokossa
 
Регистрация: 18.10.2017
Сообщений: 6

Сообщение от 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');
        }
    });
});
Не работает
Ответить с цитированием
  #10 (permalink)  
Старый 19.10.2017, 13:57
Новичок на форуме
Отправить личное сообщение для kokossa Посмотреть профиль Найти все сообщения от kokossa
 
Регистрация: 18.10.2017
Сообщений: 6

РЕШЕНИЕ ВОПРОСА!
Решилось таким образом

$(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');
        }
    });
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Загрузка ссылки по клику в модальном окне. Нужна помощь JustSmi1e jQuery 2 11.01.2017 17:39
Нужна помощь по снятию ограничения прога"Размеры" SerfUA jQuery 3 29.07.2014 16:57
Нужна помощь по javascript darklend Общие вопросы Javascript 0 12.01.2014 22:33
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17
Срочно нужна помощь Гость Общие вопросы Javascript 2 02.09.2008 14:13