Javascript.RU

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

Помогите с активными ссылками в меню
<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??
Ответить с цитированием
  #2 (permalink)  
Старый 30.05.2010, 16:32
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

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

Последний раз редактировалось exec, 30.05.2010 в 16:35.
Ответить с цитированием
  #3 (permalink)  
Старый 30.05.2010, 16:41
Новичок на форуме
Отправить личное сообщение для kello Посмотреть профиль Найти все сообщения от kello
 
Регистрация: 30.05.2010
Сообщений: 5

Ничего не получается Все так же если я нажимаю например на "О Сайте" то у него не меняется стиль
Ответить с цитированием
  #4 (permalink)  
Старый 30.05.2010, 16:51
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

kello, вы ставите код в конец body?
Ответить с цитированием
  #5 (permalink)  
Старый 30.05.2010, 17:03
Новичок на форуме
Отправить личное сообщение для kello Посмотреть профиль Найти все сообщения от kello
 
Регистрация: 30.05.2010
Сообщений: 5

у меня это меню в отдельный блок сведено на 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 Как вы мне написали
Ответить с цитированием
  #6 (permalink)  
Старый 30.05.2010, 17:15
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

kello, скрипт должен быть после меню.
Ответить с цитированием
  #7 (permalink)  
Старый 30.05.2010, 17:38
Новичок на форуме
Отправить личное сообщение для kello Посмотреть профиль Найти все сообщения от kello
 
Регистрация: 30.05.2010
Сообщений: 5

Спасибо всем кто помогал, просто обычно я обхожусь связкой 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';
}
}
}
Ответить с цитированием
  #8 (permalink)  
Старый 30.05.2010, 17:40
Новичок на форуме
Отправить личное сообщение для kello Посмотреть профиль Найти все сообщения от kello
 
Регистрация: 30.05.2010
Сообщений: 5

Еще бы узнать что это значит вообще. А то мне просто дали код. Хотелось бы понять))
Ответить с цитированием
  #9 (permalink)  
Старый 30.05.2010, 18:05
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

(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';
		}
	}
})();
Ответить с цитированием
  #10 (permalink)  
Старый 30.05.2010, 23:42
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Почему бы не подсвечивать меню на серверной стороне? И заодно избавляться от ссылок „на саму себя”.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите настроить скрипт раскрывающегося меню melomanfm Работа 6 10.08.2009 01:21
Помогите сделать такое меню(( Lilith Я не знаю javascript 2 02.06.2009 02:31
помогите с меню Ribt Общие вопросы Javascript 0 20.09.2008 08:11
Помогите сделать простое меню debugger Элементы интерфейса 1 09.09.2008 23:14