На многих сайтах я вижу ссылки с href="#". Что это значит? Для чего он используется?
Что такое href= "#" и почему он используется?
Ответ 1
О гиперссылках:
Основное использование якорных тегов - <a></a> - это гиперссылки. Это в основном означает, что они вас куда-то отправят. Для гиперссылок требуется свойство href, поскольку оно определяет местоположение.
Hash:
А хэш - # внутри гиперссылки указывает идентификатор элемента html, которому нужно прокручивать окно.
href="#some-id" будет прокручиваться до элемента на текущей странице, например <div id="some-id">.
href="//site.com/#some-id" переместится на site.com и прокрутится до идентификатора на этой странице.
Прокрутите вверх:
href="#" не указывает имя идентификатора, но имеет соответствующее местоположение - верх страницы. Щелчок якоря с помощью href="#" переместит положение прокрутки вверх.
Это ожидаемое поведение в соответствии с документацией w3.
Заполнители гиперссылок:
Пример, где гиперссылка имеет смысл, находится в шаблонных превью. На одностраничных демонстрациях для шаблонов я часто видел <a href="#">, так что якорный тег является гиперссылкой, но никуда не уходит. Почему бы не оставить свойство href пустым? Пустое свойство href на самом деле является гиперссылкой на текущую страницу. Другими словами, это приведет к обновлению страницы. Как я уже говорил, href="#" также является гиперссылкой и вызывает прокрутку. Поэтому наилучшее решение для гиперссылок-заполнителей на самом деле href="#!" Идея здесь заключается в том, что, надеюсь, это не элемент на странице с id="!" (кто это делает!?), и поэтому гиперссылка не обращается ни к чему - так что ничего не происходит.
О тегах привязки:
Еще один вопрос, который вам может быть интересно: "Почему бы просто не оставить свойство href?". Общий ответ, который я слышал, заключается в том, что свойство href требуется, поэтому оно должно присутствовать на якорях. Это ЛОЖЬ! Свойство href требуется только для привязки, чтобы фактически быть гиперссылкой! Прочитайте от w3. Итак, почему бы просто не оставить это место для заполнителей? Браузеры отображают стили по умолчанию для элементов и изменят стиль по умолчанию тега привязки, который не имеет свойства href. Вместо этого он будет рассматриваться как обычный текст. Это даже изменяет поведение браузера относительно элемента. Строка состояния (внизу экрана) не будет отображаться при наведении на якорь без свойства href. Лучше всего использовать значение href-заполнителя на якоре, чтобы убедиться, что оно рассматривается как гиперссылка.
Посмотрите эту демонстрацию, демонстрируя различия в стиле и поведении.
Ответ 2
Помещая символ "#" как href для чего-то, означает, что он указывает не на другой URL-адрес, а скорее на другой идентификатор или тег имени на той же странице. Например:
<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>
Однако, если нет идентификатора или имени, тогда он не "где нет".
Вот еще один аналогичный вопрос, заданный Якорями HTML с 'именем' или 'id'?
Ответ 3
Это ссылка, которая ссылается на нигде по существу (она просто добавляет "#" на URL-адрес). Он использовался по разным причинам. Например, если вы используете какой-то JavaScript/jQuery и не хотите, чтобы фактический HTML был связан где угодно.
Он также используется для привязки страниц, который используется для перенаправления на другую часть страницы.
Ответ 4
Неупорядоченные списки часто создаются с намерением использовать их в качестве меню, но элемент списка li - это текст. Поскольку элемент списка li является текстом, указатель мыши не будет стрелкой, а "курсором". Пользователи привыкли видеть указательный палец для указателя мыши, когда что-то доступно для клика. Использование тега привязки a внутри тега li приводит к изменению указателя мыши на указательный палец. Указательный палец намного лучше использовать в качестве меню.
<ul id="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Menu Item 4</a></li>
</ul>
Если список используется для меню и не нуждается в ссылке, тогда URL не нужно указывать. Но проблема в том, что если вы не учитываете атрибут href, текст в теге <a> рассматривается как текст, и поэтому указатель мыши возвращается к I-курсору. Я-курсор может заставить пользователя думать, что элемент меню не доступен для клика. Поэтому вам все равно нужен href, но вам не нужна ссылка нигде.
Вы можете использовать множество тегов div или p для списка меню, но указатель мыши также будет для них курсором.
Вы можете использовать множество кнопок, расположенных друг над другом для списка меню, но список, по-видимому, предпочтительнее. Вероятно, именно поэтому тег href="#", который указывает на никуда, используется в тегах привязки внутри тегов списка.
Вы можете установить стиль указателя в CSS, так что это еще один вариант. href="#" нигде не может быть ленивым способом установить стиль.
Ответ 5
Насколько я знаю, он обычно является заполнителем ссылок, к которым привязан к ним JavaScript. Основной смысл ссылки - выполнение кода JavaScript; браузеры с поддержкой JS затем игнорируют реальную цель ссылки. Если браузер не поддерживает JS, хеш-метка по существу превращает ссылку в no-op. См. Также ненавязчивый JavaScript.
Ответ 6
Как указывалось в некоторых других ответах, для элемента a требуется атрибут href, а # используется как заполнитель, но также является историческим артефактом.
href
Это был единственный обязательный атрибут для якорей, определяющих гипертекстового источника, но больше не требуется в HTML5. Опуская этот атрибут создает ссылку на местозаполнитель. Атрибут href указывает целевую ссылку, либо URL-адрес, либо фрагмент URL-адреса. URL-адрес фрагмент - это имя, которому предшествует хэш-знак (#), который указывает внутреннее целевое местоположение (идентификатор) в текущем документе.
Кроме того, для HTML5 spec:
Если элемент a не имеет атрибута href, то элемент представляет собой заполнитель, где ссылка могла бы быть размещена иным образом, если она были релевантными, состоящими только из содержимого элемента.
Ответ 7
К сожалению, наиболее распространенное использование <a href="#"> - ленивыми программистами, которым нужны кликабельные элементы, не содержащие гиперссылки javascript-кода, которые ведут себя как привязки, но они не могут быть использованы для добавления стилей cursor: pointer; или :hover в класс для своих элементов без гиперссылки, а также слишком ленив, чтобы установить href в javascript:void(0);.
Проблема заключается в том, что один <a href="#" onclick="some_function();"> или другой неизбежно заканчивается ошибкой javascript, и якорь с ошибкой javascript onclick всегда заканчивается после href. Обычно это оказывается раздражающим прыжком в верхнюю часть страницы, но в случае сайтов с использованием <base>, <a href="#"> обрабатывается как <a href="[base href]/#">, что приводит к неожиданной навигации. Если генерируются любые ошибки, связанные с протоколированием, вы не увидите их в последнем случае, если вы не включите постоянные журналы.
Если элемент привязки является, который используется как не-якорь, то должен установить href на javascript:void(0); ради изящного деградация.
Я просто потратил два дня на отладку случайной неожиданной переадресации страницы, которая должна была просто обновить страницу и, наконец, отследила ее до функции, повышающей событие click <a href="#">. Заменив # на javascript:void(0);, он зафиксировал его.
Первое, что я делаю в понедельник, - это очистка проекта всех экземпляров <a href="#">.
Ответ 8
Проблема с использованием href= "#" для пустой ссылки заключается в том, что она приведет вас к верхней части страницы, которая может не быть желаемым действием. Чтобы этого избежать, для старых браузеров или не-HTML5-доктиков используйте
<a href="javascript:void(0)">Goes Nowhere</a>