Javascript.RU

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

Подскажите, как выделить активный пункт меню
Всем привет,
знаю, что тема не раз поднималась, в том числе и на этом форуме, но у меня возникли проблемы с реализацией. Провел часа 4 в гугле, но работающего для меня кода не нашел.

Итак, есть меню:

<div class="top_menu">
<ul>
<li><a href="/page1/">Страница 1</a></li>
<li><a href="/page2/">Страница 2</a></li>
<li><a href="/page3/">Страница 3</a></li>
</ul>
</div>


Нужно, чтобы при нахождении на страницах, отличных от page1, page2, page3 все выглядело как выше, а при нахождении, к примеру, на странице www.site.tld/page2/ или www.site.tld/page2/subpage/ к li добавлялся нужный класс, т.е.
<li class="current"><a href="/page2/">Страница 2</a></li>


Логика понятна - пропарсить все li из дива с классом top_menu на предмет тега a c атрибутом href, совпадающим с url текущей страницы, и в нужный li добавить класс current. Но ни один из примеров, найденных мной, на моем сайте не заработал (js в браузере включен, jquery подгружен, другие скрипты выполняются корректно).

Т.к. условия таковы, что сайт строится на шаблоне, в котором не обрабатывается php и в котором css во внешнем файле, ничего кроме jquery здесь не поможет. Подскажите, плз, нужный код.

Последний раз редактировалось maksd, 10.11.2010 в 03:26.
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2010, 05:43
Кандидат Javascript-наук
Отправить личное сообщение для abc_ua Посмотреть профиль Найти все сообщения от abc_ua
 
Регистрация: 20.05.2010
Сообщений: 105

Как-то так:
$('div.top_menu li').each(function () {if (this.getElementsByTagName("a")[0].href == location.href) this.className = "current";});

Последний раз редактировалось abc_ua, 10.11.2010 в 06:01.
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2010, 08:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,563

Сообщение от maksd
пропарсить все li из дива с классом top_menu на предмет тега a c атрибутом href, совпадающим с url текущей страницы, и в нужный li добавить класс current
Серверного языка нет совсем? Страницы все статичные?
Ответить с цитированием
  #4 (permalink)  
Старый 11.11.2010, 23:47
Новичок на форуме
Отправить личное сообщение для maksd Посмотреть профиль Найти все сообщения от maksd
 
Регистрация: 10.11.2010
Сообщений: 2

abc_ua,
спасибо, Ваш код работает, но только для случая нахождения на странице /page2/, на подстраницах - не работает. Подскажите, есть ли возможность проверять не точное соответствие location.href, а наличие в нем?

ksa,
страницы генерятся CMS, а она не обрабатывает никакой серверный язык в шаблонах, так что можно считать, что нет. Сложный случай, я знаю
Ответить с цитированием
  #5 (permalink)  
Старый 12.11.2010, 00:00
Кандидат Javascript-наук
Отправить личное сообщение для abc_ua Посмотреть профиль Найти все сообщения от abc_ua
 
Регистрация: 20.05.2010
Сообщений: 105

попробуйте document.URL
Ответить с цитированием
  #6 (permalink)  
Старый 12.11.2010, 00:17
Интересующийся
Отправить личное сообщение для Bercut Посмотреть профиль Найти все сообщения от Bercut
 
Регистрация: 10.11.2010
Сообщений: 22

конкретно для вашего случая подойдёт так
$('DIV.top_menu A').each(function () {
    var re = new RegExp('^' + this.href);
    if(re.test(document.location.pathname)) {
        this.parentNode.className = "current";
    }
});
Ответить с цитированием
  #7 (permalink)  
Старый 12.11.2010, 00:17
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от abc_ua
попробуйте document.URL


как пример:
var array = ["location", "host", "ya.ru/1", "ya.ru/2", "ya.ru/3", "можно", "нельзя"];
var host = window[array[0]][array[1]];

switch(host){
    case array[2] : alert(array[2]);
        break;
    case array[3] : alert(array[3]);
        break;
    case array[4] : alert(array[4]);
        break;
    default : alert('Запускать скрипт на ' + host + ' ' + array[6] + ',\nно ' + array[5] + ' тут:\n' + array[2] + '\n' + array[3] + '\n'+ array[4])
}
Ответить с цитированием
  #8 (permalink)  
Старый 12.11.2010, 00:23
Интересующийся
Отправить личное сообщение для Bercut Посмотреть профиль Найти все сообщения от Bercut
 
Регистрация: 10.11.2010
Сообщений: 22

Сообщение от monolithed
как пример:
ну это как-то не универсально - что если там 3 десятка пунктов меню и они пополняются?..
но если для повышения опыта, конечно, зачёт!
Ответить с цитированием
  #9 (permalink)  
Старый 12.11.2010, 01:06
Кандидат Javascript-наук
Отправить личное сообщение для abc_ua Посмотреть профиль Найти все сообщения от abc_ua
 
Регистрация: 20.05.2010
Сообщений: 105

document.URL не возвратит полный адрес?
Ответить с цитированием
  #10 (permalink)  
Старый 09.08.2011, 07:41
Новичок на форуме
Отправить личное сообщение для corel25 Посмотреть профиль Найти все сообщения от corel25
 
Регистрация: 09.08.2011
Сообщений: 1

А как сделать тоже самое...
А как сделать тоже самое... только чтобы class="current" находился не в <li> а в <a href"#" class="current">?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Меню на дивах Golovastik (X)HTML/CSS 38 13.09.2010 09:10
Подскажите как в superfish.js меню SAA jQuery 5 20.12.2009 21:54
Подскажите как сделать меню на CSS если: greatilya (X)HTML/CSS 10 18.10.2009 20:26
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 11:49
Ссылка под слоем перекрывает слой Devider Общие вопросы Javascript 7 24.02.2009 23:18