Помогите с активными ссылками в меню
<div id="MainMenu">
<div id="tab"> <ul id="mail"> <li><a href="index.php"><span>Главная</span></a></li> <li><a href="about.php"><span>О Сайте</span></a></li> <li><a href="javascript:void(null)"><span>Форум</span></a></li> <li><a href="javascript:void(null)"><span>Журнал</span></a></li> </ul> </div> </div> Есть такое меню. Хочу чтоб при загрузке например "about.php" у тега <li> менялся стиль на "item_active"То есть хочу чтоб та страница на которой я сейчас нахожусь была выделена. Как это сделать с JS??:) |
(function () { var nodes = document.getElementById('mail').getElementsByTagName('a'); for (var i = 0; i < nodes.length; i++) { if (nodes[i].href == location.href) { nodes[i].parentNode.className = 'item_active'; } } })(); |
Ничего не получается Все так же если я нажимаю например на "О Сайте" то у него не меняется стиль
|
kello, вы ставите код в конец body?
|
у меня это меню в отдельный блок сведено на php И сверху кода подключается JS Т.е примерно так
<script type="text/javascript" src='scripts/vyd2.js'></script> <div id="MainMenu"> <div id="tab"> <ul> <li><a href="index.php"><span>Главная</span></a></li> <li><a href="about.php"><span>О Сайте</span></a></li> <li><a href="javascript:void(null)"><span>Форум</span></a></li> <li><a href="javascript:void(null)"><span>Журнал</span></a></li> </ul> </div> </div> А Сам JS Как вы мне написали |
kello, скрипт должен быть после меню.
|
Спасибо всем кто помогал, просто обычно я обхожусь связкой PHP и CSS. А вот понадобился JS. Начал вчера только изучать. Значит я сделал вот так:
<div id="MainMenu"> <div id="tab"> <ul> <li class="active" id='mail' onload="a()"><a href="index.php"><span>Главная</span></a></li> <li class="active1" id='mail1' onload="b()"><a href="about.php"><span>О Сайте</span></a></li> <li><a href="javascript:void(null)"><span>Форум</span></a></li> <li><a href="javascript:void(null)"><span>Журнал</span></a></li> </ul> </div> </div> Каждому тегу <li> присвоил свой id А в JS написал: onload = function () { var nodes = document.getElementById('mail').getElementsByTagNa me('a'); for (var i = 0; i < nodes.length; i++) { if (nodes[i].href == location.href) { nodes[i].parentNode.className = 'item_active'; } } var nodes = document.getElementById('mail1').getElementsByTagN ame('a'); for (var i = 0; i < nodes.length; i++) { if (nodes[i].href == location.href) { nodes[i].parentNode.className = 'item_active'; } } } |
Еще бы узнать что это значит вообще. А то мне просто дали код. Хотелось бы понять))
|
(function () { // Закрываем глобальное пространство имён от засорения // nodes = все ссылки из элемента с id="mail" var nodes = document.getElementById('mail').getElementsByTagName('a'); // цикл for (var i = 0; i < nodes.length; i++) { // если href ссылки равен текущему URL if (nodes[i].href == location.href) { // то присваиваем родительскому элементу (LI) класс item_active nodes[i].parentNode.className = 'item_active'; } } })(); |
Почему бы не подсвечивать меню на серверной стороне? И заодно избавляться от ссылок „на саму себя”.
|
Часовой пояс GMT +3, время: 05:58. |