Используем решетку в url при помощи JavaScript

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

Как при помощи jQuery выбрать элемент с хешем

Для начала выведем хеш в консоле. Чтобы вызвать консоль в браузере используйте F12 или Ctrl+Shift+I. Использовать будем window.location:

console.log(window.location);

Подробнее про глобальный объект window вы можете почитать отдельно, рассматривать в рамках этой статьи не будем. Теперь вернемся к коду – помните, если вы только что дописали # в строке браузера, у вас ничего не выведется, поэтому пишем и жмем Enter – я дописываю в урл #test. Если вы всё сделали правильно, то в консоле браузера увидите очень много разных свойств, то что нам нужно это .hash, поэтому код:

window.location.hash

Но он выводит #test, избавимся от первого символа:

window.location.hash.slice(1);

Отлично, мы получили хэш и теперь можем использовать его при сравнении с каким-либо свойством, например записанным в data-atr (именно так и нужно записывать все пользовательские атрибуты в тегах):

<script>
// colors and url
$(function(){

	var $hash = window.location.hash.slice(1);

	$('.js-color').each(function(){
		var $color = $(this).data('color');
		if ($color == $hash) {
			$(this).addClass('active');
		}
	});

});
</script>

в HTML это выглядит так:

<span class="js-color" data-color="red">Красный</span>
<span class="js-color" data-color="black">Черный</span>

Как вы уже догадались, если хэш из строки (#test) совпадает со свойством data-color, то мы добавляем класс active. При загрузке страницы исполняется наш код. Но, сейчас ничего не происходит, а все потому что мы указали неправильный хэш. Меняем на #red.

Если же нам надо переделать на клик по js-color, то код будет выглядеть вот так:

<script>
// colors and url
$(function(){

	var $hash = window.location.hash.slice(1);

	$('.js-color').each(function(){
		var $color = $(this).data('color');
		if ($color == $hash) {
			$(this).click();
		}
	});

	$('.slider__btn').on('click', function(){
		var $color = $('.js-color.active').data('color');
		window.location = '#' + $color;
		return true;
	});

	$('.js-color').on('click', function(){
		var $color = $(this).data('color');
		window.location = '#' + $color;
		return true;
	});

});
</script>

Еще пара слов про хэш. В данной задаче использовать хэш можно, но я бы рекомендовал найти другой способ. Где еще применяется данный символ? Самое частое его использование это заглушка в вёрстке в ссылках:

<a href="#">Ссылка</a>

Также, хэш используется для перехода к конкретному блоку на сайте – чаще всего это применяется в лендингах, так называемый переход по анкору (якорю):

<a href="#contact>Контакты</a>
CODE
<div id="contact"> ... </div>

Надеюсь данная информация вам пригодилась, удачной работы 🙂