<a>script ссылки без href= "#"

В моем веб-приложении используется множество привязанных ссылок <a href="#">Perform client script action</a>, которые используются для сценариев (привычка, которую я получал из своих дней в качестве пользователя Dreamweaver более 10 лет назад), и теперь я начинаю сомневаться, если это необходимо.

Я действительно не знаю, почему <a href="#"> используется в первую очередь - я предполагаю, что наличие атрибута href заставляет браузеры применять классы :link и :visited psuedo, которые упрощают таблицы стилей. Это также делает браузер неявно применять свойство cursor: pointer, которое может быть желательно.

Я использую jQuery (после короткого срока службы с помощью MooTools), и ссылки работают так же, как и атрибут и href="#", поэтому я должен просто полностью удалить атрибут и изменить мою таблицу стилей, чтобы компенсировать удаление :link psuedo-class? Есть ли что-нибудь еще, что я могу пропустить, любой полудокументированный вуду, который атрибут href наследует элемент привязки?

ОТВЕТЫ

Ответ 1

<a> обозначает якорь

Если вы включаете атрибут [href] в элемент <a>, это привязка указывает на местоположение, что означает, что вы можете перейти на новую страницу, конкретный фрагмент текущей страницы (следовательно, #, называемый идентификатором фрагмента) или конкретный фрагмент новой страницы.

<a> Элементы без атрибута [href] исторически были присвоены атрибут [name], который можно было бы использовать в качестве адресата идентификатора фрагмента. Браузеры позже добавили поддержку для привязки к любому атрибуту [id], и теперь это предпочтительный метод для связывания с фрагментом документа.

Что это значит для автономных элементов <a>?

Элемент a[href] - это ссылка (поэтому они сопоставляются с :link в css). ссылки доступны. Элемент a без атрибута [href] в противном случае является просто заполнителем, для которого ссылка могла бы быть размещена, а не кликабельна, находятся ли они в порядке табуляции страницы.

Если вы хотите, чтобы ваши ссылки были навигационными с клавиатуры, что важно для доступности (WAI-ARIA), вам нужно будет сделать один из следующее:

  • измените элемент на <button type="button">
  • сохранить атрибут [href]
  • добавить [tabindex="0"] и один из [role="button"] или [role="link"] (и, возможно, некоторый стиль)

Более подробную информацию об атрибуте [role] можно найти в разделе модели ролей Документы WAI-ARIA.

Изменение разметки

Если у вас нет причины сохранять атрибут [href], вы также можете использовать элемент <button>:

<button type="button">
        ^^^^^^^^^^^^^

Атрибут [type] используется для того, чтобы сделать элемент общей кнопкой, иначе <button> по умолчанию будет [type="submit"], что может быть нежелательно, поскольку оно может инициировать отправку формы.

Если вы не можете использовать <button> (обычно это происходит, когда внутренняя разметка должна содержать <div>), вы можете подделать <button>, используя:

<div role="button" tabindex="0">Some clickable text</div>

Вам нужно будет прослушать события keypress и вызвать события click для Enter и Space.

Сохранение разметки

Если вы сохраняете элемент <a> и его атрибут [href], для его значения существует несколько параметров.

Реальная ссылка

E.x.

  • <a href="/some/location/for/users/without/js">
  • <a href="#document-fragment">

Если вам необходимо предоставить поддержку пользователям с отключенным JS, вы можете также направить их на страницу, которая выполняет эквивалентную функциональность без JS.

В дополнение, это также включает в себя предоставление ссылок на фрагменты документа для ссылки на контент в том же документе. Например, отображаемая область может быть отмечена как:

<a href="#more" class="toggleable">Read More</a>
<div id="more">Lorem ipsum dolor sit amet</div>

Таким образом, с JS область может быть свернута и расширена, и без JS ссылка приведет пользователя к соответствующему контенту на странице.

A dud href

E.x.

  • <a href="#">
  • <a href="javascript:void(0)">
  • <a href="about:blank">

Если вы запрещаете поведение по умолчанию за кадром в JavaScript и не поддерживаете пользователей с отключенным JS, вы можете использовать значение "dud" href, чтобы сохранить ссылку в порядке табуляции и автоматически включить Enter для запуска события click. Вы должны добавить [role="button"] как семантически, тэг <a> больше не используется как ссылка, а как кнопка.

<a href="#" role="button">Some clickable text</a>

Ответ 2

Лично я предпочитаю использовать href="javascript:void(null);", чтобы дать браузеру href, который не испортил бы любое использование хэшей.

Единственное различие, которое я заметил о ссылках href-less, заключается в том, что браузер не будет подчеркивать их по умолчанию, поэтому просто добавьте этот стиль, и вы должны быть хорошими.

Ответ 3

Не знаю ни одного вуду, но если у вас много ссылок на странице, и вы вытаскиваете href, тогда вам нужно будет добавить имя класса, чтобы дать вам синюю и подчеркивающую на каждом. Другими словами, зачем вводить больше работы, когда браузер все будет готов позаботиться или он. Итак, коротко придерживайтесь того, что вы знаете, и я подозреваю, что если вы удалите href, страница не будет проверять http://validator.w3.org/

Ответ 4

У меня была эта проблема, особенно для того, чтобы название аккордеона было <a> чтобы его можно было накладывать, но не щелкать. Это не будет работать без href, поэтому я помещаю текст id после "#" в href и, похоже, работает. Это делает ссылки доступными для табуляции, но не может быть нажата.

<a href="#${accordionGroup.id}"> Title </a>

который выводится как:

<a href="#acc234923"> Title </a>

Ответ 5

Я использовал HTML, CSS, JS-шаблон для React, и эта строка кода отлично работает для меня:

<a href={() => false}> Link </a>