Сообщений в теме: 6

[compromiss]

Решил заморочиться на то, чтобы сделать выделение той ссылки, на странице которой мы находимся.
Меньше теории, больше практики.
Есть у нас меню:

<ul class="navigation">
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
</ul>

В данном случае, при переходе на любую из страниц, меню останется неизменным.
Предположим, у нас есть класс "active"(любители фреймворка "бутстрап" узнают, о чем речь).
Итак, присваивая класс "active" ссылке она изменит свой внешний вид, что даст понять, на какой странице мы находимся.

Есть простой вариант, как это можно сделать.
Добавляем в код шаблона следующий текст:

<script>
$(document).ready(function(){
$('ul.navigation a').each(function () {
if (this.href == location.href) $(this).parent().addClass('active');
});
});
</script>

Как ты уже заметил, мой юный "сайтостроитель", в 3-й строке присутствует название класса, в котором необходимо сделать ссылки активными, при переходе на них.
То есть, нажав на кнопку "Пункт 2", она изменит свое строение на:

<li class="active"><a href="#">Пункт 2</a></li>

Как и любому JS скрипту, требуется подключение библиотеки jQuery
Подключить ее можно следующим образом:

<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Сообщение отредактировал compromiss: 03 Октябрь 2013 - 8:09

[Santiago]

Допиши, что обязательно подключение библиотеки jQuery, иначе работать не будет

[Brutal]

Нормально, сейчас занимаюсь бутстрапами, познавательный урок.Ещё что-нибудь бы интересного =)

Сообщение отредактировал Brutal: 17 Август 2013 - 14:32

[GaB-GaB]

Не помешало бы еще привести пример.

[Santiago]

Не помешало бы еще привести пример.

Пример чего?

[GaB-GaB]

Пример чего?

Как это будет выглядеть.

[ykpon]

Если есть необходимость в навигации на странице, где нет обновления, то бишь аяксом, например, то можно сделать следующим образом, как сделал это я:

$(document).ready(function() {
	$('#nav').on('click', 'a', function(){
		if ($("#nav a").hasClass("active")) {
			$('#nav a').removeClass('active');
		}
		$(this).addClass('active');
	});
});

и:

<div class="list-group" id="nav">
	<a class="list-group-item" href="#" onclick="func();">Link 1</a>
	<a class="list-group-item" href="#" onclick="func();">Link 2</a>
	<a class="list-group-item" href="#" onclick="func();">Link 3</a>
</div>

Логика проста: При нажатии на ссылку (элемент <a>) внутри div'a с ID "nav" удалятся все классы "active" у ссылок, если таковые имеются, и добавится этот класс к ссылку, на которую производилось нажатие.