1. 12. Как делать пустые ссылки?

Как делать пустые ссылки?

Пустые ссылки делают, когда страницы ещё нет, а ссылка на неё уже есть. Например, в меню может быть ссылка на каталог, а каталог ещё не начали верстать. Другая ситуация — когда нужно что-то показать на странице, но без её перезагрузки, например, модальное окно.

Есть несколько способов размечать пустые ссылки. Рассмотрим, в чём особенности каждого из способов

<a href="">Каталог</a>

Это один из самых худших вариантов, так как при клике по такой ссылке происходит перезагрузка страницы.

<a href="#">Каталог</a>

Этот способ изменяет адрес страницы, добавляя в конце #: например, если адрес htmlacademy.ru, то после клика он станет htmlacademy.ru/#. При этом страница прокрутится к самому верху: если ссылка была в футере, то сайт прокрутится до самого начала. Такое поведение не всегда желательно, поэтому отбросим этот вариант.

<a href="##">Каталог</a> или <a href="#!">Каталог</a>

Это усовершенствованная версия предыдущего способа, так как страница в этом случае не прокручивается вверх. Адрес страницы при этом меняется: также добавляется # в конце адреса. Однако, этот способ работает не во всех браузерах.

<a href="#no_scroll">Каталог</a>

Можно сделать полноценную якорную ссылку, но при этом без элементов с id=”no_scroll”. Этот способ работает во всех браузерах, не скролит страницу к началу, но меняет ссылку, добавляя #no_scroll в конец адреса.

<a href="javascript:void(0);">Каталог</a>

Достаточно старый способ, который с помощью JavaScript просит ссылку ничего не делать. Правильнее было бы написать javascript:undefined;, но этот вариант длиннее, поэтому придумали более короткую замену — void(0), которая также возвращает undefined. Этот вариант был создан ещё в то время, когда JavaScript добавляли прям в разметку. Ссылка в этом случае не изменяется, что лучше, чем в предыдущем варианте.

<a href="bla-bla-bla" onclick="return false;">Ссылка</a>

Иногда программисты могут придумывать новые способы. Например, такой: добавить любое значение в href и дополнить его атрибутом onclick со значением return false;. В этом случае не произойдёт ни прокрутки, ни изменения ссылки. Но есть нюанс: у элемента может быть только одно событие onclick и на это событие можно «повесить» только один обработчик. Иногда это может стать проблемой. Однако, в настоящее время есть альтернативный способ добавления событий — специальный метод addEventListener. Подробнее о событиях и их обработчиках мы рассказываем на курсах по JavaScript.

<a>Каталог</a>

Ещё один вариант — вообще не указывать href, если он не нужен. Ссылка превращается в <span>: удаляется стандартное подчёркивание снизу и стандартный синий цвет. Также удаляются состояния active и focus, потому что с такой ссылкой нельзя взаимодействовать, но остаётся состояние hover. Это хороший вариант, так как ссылки действительно пока нет и поэтому не с чем взаимодействовать, но при этом пользовательская стилизация (та, которую пишете вы), продолжает работать.

Можно использовать любой вариант, но теперь вы знаете все ограничения каждого способа. Мы рекомендуем использовать один из двух — <a href="#">Каталог</a> или <a>Каталог</a>.