Форум Сайтостроение Веб-строительство

Как изменить стиль ссылки текущего раздела?

[Удален]
1198

Доброго времени суток. В интернете много скриптов, но кроссбраузерного решения я так и не смог найти. Требуется выделить другим цветом ссылку, в соответствии с разделом. То есть при переходе пользователя в какой нибудь раздел, нужно присваивать ссылке в навигации класс, которому уже в css настроить цвет.

Нашёл подходящее решение в интернете, но работает только в некоторых браузерах.

Помогите решить данную проблему.

Алексей Барыкин
На сайте с 04.02.2008
Offline
272
Алексей Барыкин
#1

На jQuery

	var $location = document.location.pathname;
	$("a[href]").each(function() {
			$href = $(this).attr('href');
			$href = $href.replace(/(http\:\/\/[^\/]+\/)/gi, "/"); // для относительных и абсолютных ссылок
	
			$pattern = new RegExp($href, "gi");
			if (($pattern.test($location)) && ($href === $location)) {
					$(this).addClass('curr');
			}
	});
https://adminbook.ru/
[Удален]
#2

Алексей Барыкин, объясните пожалуйста подробней где и чего прописывать. Я в этих вопросах плаваю. :)

К странице подключил, а где указать класс или айди, какой именно контейнер задействовать?

V
На сайте с 03.12.2007
Offline
94
vavenko
#3

Для начала подключаете фреймворк, качаете его с офсайта jquery.com

<script type="text/javascript" src="jquery.js"></script>

Потом вставляете функцию,которую дал Алексей Барыкин

<script type='text/javascript'>
$(document).ready(function(){
var $location = document.location.pathname;
$("a[href]").each(function() {
$href = $(this).attr('href');
$href = $href.replace(/(http\:\/\/[^\/]+\/)/gi, "/"); // для относительных и абсолютных ссылок

$pattern = new RegExp($href, "gi");
if (($pattern.test($location)) && ($href === $location)) {
$(this).addClass('curr');
}
});
});
</script>

Текущая ссылка будет иметь класс .curr - описываете его в файле стилей.

Алексей Барыкин
На сайте с 04.02.2008
Offline
272
Алексей Барыкин
#4
Сашко:
Алексей Барыкин, объясните пожалуйста подробней где и чего прописывать. Я в этих вопросах плаваю. :)

К странице подключил, а где указать класс или айди, какой именно контейнер задействовать?

var $location = document.location.pathname; - получаем текущий адрес страницы

$("a[href]").each(function() { - Селектор выбора всех тегов A с атрибутом href и перебор их в цикле

далее в этом цикле получаем адреса ссылок и сравниваем с адресами страницы, если имеются общие фрагменты (страница /catalog/page1 и ссылка /catalog ) - выражение $pattern.test($location) даст TRUE и выполнится присвоение этой ссылке класса CURR - $(this).addClass('curr');

Подправленная версия:

	var $location = document.location.pathname;
	$("a[href]").each(function() {
			$href = $(this).attr('href');
			$href = $href.replace(/(http\:\/\/[^\/]+\/)/gi, "/"); // для относительных и абсолютных ссылок
	
			$pattern = new RegExp($href, "gi");
			if ($pattern.test($location)) {
					$(this).addClass('curr');
			}
	});
Мартин Сплитт о ссылках Обновленное руководство по ссылкам Google официально признал плохими
[Удален]
#5

Большое спасибо, всё прекрасно работает.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий