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

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

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

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

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

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

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

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

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

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

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

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

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

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

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