Активация текущего пункта меню.
Всем доброго дня!
Облазил весь гугл, не могу допетрить, как с помощью jquery активировать текущую строку менюшки. Менюшка выглядит так:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="/index.php?ukey=auxpage_service">Сервис</a></li>
<li><a href="/index.php?ukey=news">Акции</a></li>
<li><a href="/index.php?ukey=auxpage_articles">Статьи</a></li>
<li><a href="/index.php?ukey=auxpage_foto"> Фотогалерея </a></li>
<li><a href="/index.php?ukey=response">Вопрос-Ответ</a></li>
<li><a href="/index.php?ukey=auxpage_contact">Контакты</a></li>
<li><a href="/index.php?ukey=auxpage_about">О Компании</a></li>
</ul>
</div>
</div>
</div>
Полагаю надо выдернуть из браузера концовку адреса из массива location.href сравнить его с .nav li a[href=] и применить к li класс "active". Помогите с кодом. Пытался:
$(document).ready(function() {
var now_url=location.href;
if (now_url.split('/')[1]!=0) {
$.each($(".nav li a[href*=/"+now_url.split('/')[1]+"]"),
function(){$(".nav li").addClass('active');});
}
});{/literal}
|
Я бы так сделал:
1. Получил значение ukey из location.href 2.
$('ul.nav a[href $= "'+ukey+'"]').addClass(...)
http://jquery.page2page.ru/index.php...83%D1%82%D0%B0 |
Цитата:
<script type="text/javascript">
$(document).ready(function() {
var ukey = location.href.substr(5);
$('ul.nav a[href $= "'+ukey+'"]').addClass('active');
});
</script>
Чтото никак ( |
-4 напиши, а не 5
|
|
Почему то выборка не отрабатывает оО
$('ul.nav a[href $= "'+ukey+'"]').addClass('active');
http://promsnab-tomsk.ru (менюшка вверху) причем до смешного доходит, пишу:
$(document).ready(function() {
$('ul.nav a[href $= news]').css('color:#ff0000');
});
Выборка не идет и все тут ;( |
Дык он мб точному соответсвию ищет? У меня перед переменной еще и index.php стоит
|
Селектор
a[href $= news]не отрабатывает хоть убейся( |
Jakiro,
всё у тебя отрабатывает как надо. Смотри сюда http://promsnab-tomsk.ru/index.php?ukey=auxpage_articlesи в код <a href="/index.php?ukey=auxpage_articles" class="active">Статьи</a> А вот свойства класса у тебя не описано. |
Блин, класс описан, только для li, а не для а ))
|
Надо теперь как то к родителю результата выборки обратиться, хм
|
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="/index.php?ukey=auxpage_service">Сервис</a></li>
<li><a href="/index.php?ukey=news">Акции</a></li>
<li><a href="/index.php?ukey=auxpage_articles">Статьи</a></li>
<li><a href="/index.php?ukey=auxpage_foto"> Фотогалерея </a></li>
<li><a href="/index.php?ukey=response">Вопрос-Ответ</a></li>
<li><a href="/index.php?ukey=auxpage_contact">Контакты</a></li>
<li><a href="/index.php?ukey=auxpage_about">О Компании</a></li>
</ul>
</div>
</div>
</div>
<style>.navbar-inner .nav a.Active{color:red;}</style>
<script type="text/javascript">
$(document).ready(function() {
var url=document.URL.replace(/^.*index\.php\?ukey=/img,"/index.php?ukey=");
$(".navbar-inner .nav a").each(function(){
if($(this).attr("href")==url) {$(this).addClass("Active"); return false;}
});
});
</script>
|
DefF, спасибо Вам тоже, но все это работает на найденную ссылку, а мне надо на тег li, который включает эту находимую ссылку
|
Цитата:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="/index.php?ukey=auxpage_service">Сервис</a></li>
<li><a href="/index.php?ukey=news">Акции</a></li>
<li><a href="/index.php?ukey=auxpage_articles">Статьи</a></li>
<li><a href="/index.php?ukey=auxpage_foto"> Фотогалерея </a></li>
<li><a href="/index.php?ukey=response">Вопрос-Ответ</a></li>
<li><a href="/index.php?ukey=auxpage_contact">Контакты</a></li>
<li><a href="/index.php?ukey=auxpage_about">О Компании</a></li>
</ul>
</div>
</div>
</div>
<style>.navbar-inner .nav li.Active{color:red;}</style>
<script type="text/javascript">
$(document).ready(function() {
var url=document.URL.replace(/^.*index\.php\?ukey=/img,"/index.php?ukey=");
$(".navbar-inner .nav a").each(function(){
if($(this).attr("href")==url) {$(this).parent("li").addClass("Active"); return false;}
});
});
</script>
|
т.е. Первый код, представленный Серегой_PWNZ тоже, как и Ваш, находил тупо ссылку и применял к ней стиль, а мне надо к тегу li, внутри которого лежит искомая ссылка
|
Jakiro,
Мну непонятно - Active - сейчас ставится на li a css - Вы применяете- как Вам удобно! (убрал a Выложите код Стиля для данного блока и ссылок *Или лучше ссылку на страницу |
http://promsnab-tomsk.ru/
Вверху менюшка Да, поиск идет по ссылке, но стиль приметяется к его родителю (тег li) |
Jakiro,
Замените этот скрипт
$(document).ready(function() { var url=document.URL.replace(/^.*index\.php\?ukey=/img,"/index.php?ukey="); $(".navbar-inner .nav a").each(function(){ if($(this).attr("href")==url) {$(this).addClass("Active"); return false;} }); });
на этот
$(document).ready(function() { var url=document.URL.replace(/^.*index\.php\?ukey=/img,"/index.php?ukey="); $(".navbar-inner .nav a").each(function(){ if($(this).attr("href")==url) {$(this).parent().addClass("Active"); return false;} }); });
|
Большое Вам спасибо Раед
|
| Часовой пояс GMT +3, время: 11:39. |