Здравствуй, уважаемый друг!

Кажется, ты используешь AdBlock. Этот проект развивается и существует за счет доходов от рекламы.
Добавь, пожалуйста, нас в исключения.

Спасибо за понимание.

Теперь мы команда!

Изменение вида пунктов меню при переходе на страницы

Автор: в категории Статьи о JavaScript 0 комментариев

Итак, в данной записи мы с вами попробуем создать меню, при нажатии кнопочек которого и переходе на соответствующую страничку, оно будет менять вид.

Чтобы сразу понять как это будет выглядеть — пример.
Т.е. при нажатии на ссылку мы переходим на страничку, а меню читает адрес и выделяет соответственный пункт меню, как активный.

Для этого воспользуемся JavaScript. Для простоты решения задачи подключим jQuery.
Для обычного (без вложенных подпунктов) меню мы можем воспользоваться следующим кодом:

var current = window.location.toString();
var menu = document.getElementById('menu');
var links = menu.getElementsByTagName('a');

for (var i=0;i<links.length;i++){
if (links[i] == current){
links[i].setAttribute('id', 'current');
}
}

При HTML коде такого вида:

<ul id="menu">
	<li><a href="#">Пункт 1</a></li>
	<li><a href="#">Пункт 2</a></li>
	<li><a href="#">Пункт 3</a></li>
	<li><a href="#">Пункт 4</a></li>
	<li><a href="#">Пункт 5</a></li>
</ul>

Данный скрипт будет выполнять следующее:
Строка 1 — считывание текущего адреса в строке браузера
Строка 2 — получение всех дочерних элементов для элемента с id=»menu»
Строка 3 — получение всех ссылок (элементов <a>) и их запись в массив links[]
Строка 5 — запускаем цикл, который будет проверять все ссылки в нашем массиве links[] и сверять с текущим адресом, и если есть совпадение, то ссылке устанавливается id=»current». Т.е. устанавливается стиль для текущей (нажатой) кнопочки/ссылки. Можно установить параметр class.

Если у вас есть более рациональные идеи — пишите в комментариях сайта (не от контакта), буду рад почитать и проанализировать ваши варианты!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Вверх!

Меню блога

Категории блога

Облако тегов