Створіть HTML-посилання, яке нічого не робить (буквально нічого)


87

Я хочу посилання, яке нічого не робить. Я не хочу цього:

<a href="#">

тому що тоді URL стає something.com/whatever/#.

Єдина причина, по якій я хочу посилання, полягає в тому, щоб користувач бачив, що він може натиснути на текст. JavaScript використовується для виконання певних дій, тому мені не потрібно посилання, щоб кудись перейти, але він потрібен, щоб виглядати як посилання!

Я міг би використовувати якийсь атрибут даних і сказати мені CSS, щоб елементи виглядали як посилання, якщо вони мають цей атрибут, але це здається трохи надмірним.


В чому проблема something.com/whatever/#?
Charles Sprayberry

1
ви можете дати йому href blank і повернути false у javascript. Але це більш семантично, якщо ви просто зміните властивість курсора на pointerваш у CSS
JohnP

@CharlesSprayberry: Бувають ситуації, коли ти цього не хочеш.
PeeHaa

Це було б непоганим запитанням і на ux.stackexchange.com .

1
Це питання обговорюється більш детально тут: stackoverflow.com/questions/134845 / ...
DawnPaladin

Відповіді:


124

Наведене нижче запобіжить запуску вашого href

<a href="#" onclick="return false;">

Якщо ви використовуєте jQuery, event.preventDefault()можна використовувати


Призводить до скасування додаткових подій onclick.
Rauli Rajande

5
Приводить сторінку до прокрутки вгору.
Девід Хемпі,

@DavidHempy Я цього не відчуваю. Який браузер?
Курт

1
@curt Google Chrome Версія 63.0.3239.84 (Офіційна збірка) (64-розрядна версія) (або, можливо, трохи старша версія два тижні тому)
Девід Хемпі,

Це не працює для прокрутки плагіна wordpress до ідентифікатора, і посилання все одно щось робитиме. У цьому випадку це буде помилка, яка перенаправить вас у верхню частину сторінки.
Іржі Отупал イ り オ ト ウ パ ー

88

Спробуйте це:

<a href="javascript:void(0);">link</a>

4
+1, але швидке запитання: чи є різниця між javascript:voidі javascript:void(0)?
Адам Ракіс,

3
Якщо ви спробуєте використовувати javascript: void (0) без параметра, у вас буде SyntaxError, і всі ваші сценарії будуть невдалими.
alexdets

3
@alexdets javascript:void()буде SyntaxError, але javascript:voidповертається невизначеним - так само, як void(0). Адам, наскільки я можу судити, voidі void(0)функціонально еквівалентні для цього використання. --- редагувати: хоча я бачу й інші коментарі, які натякають, що це може перезавантажити сторінку ..
andytuba

3
Чи має значення, як ви пишете великі літери javaScript / javascript / JavaScript / Javascript?
Тім Трустон,

2
@TechyTimo Ніяке використання великих літер не має значення, насправді воно не повинно бути великим. Я надіслав редагування.
Weston Ganger

28

У HTML5 це дуже просто. Просто опустіть hrefатрибут.

<a>Do Nothing</a>

З MDN в атрибуті href тегу :

href

Це був єдиний необхідний атрибут для прив’язок, що визначають посилання на джерело гіпертексту, але в HTML5 він більше не потрібен.


Що можна сказати про ручний курсор при наведенні?

Стилі за замовчуванням для браузера можуть не змінити курсор на вказівник для aтегів без href. Ви можете універсально змінити це за допомогою наступного CSS.

a {
    cursor: pointer;
}
<a>Do Nothing</a>

Однак, мабуть, краще бути більш вибірковим щодо цього та застосовувати його лише до елементів, до яких ви збираєтеся додати обробники подій.


А як щодо того, щоб зробити його сфокусованим на вкладках?

Просто додайте tabindex="0"до елемента.

<a tabindex="0">Do Nothing</a>


Чи є сенс використовувати aтег без посилання?

Зазвичай ні, можливо, краще використовувати buttonзамість цього елемент і стилізувати його за допомогою CSS. Але що б ви не використовували, уникайте використання довільного елемента div, як це можливо, оскільки це зовсім не семантично.


1
У bootstrap 4 посилання, які не мають href, не стилізуються як посилання.
user3413723

13

Не робіть це посиланням (хоча переважно це робити) і стилізуйте його за допомогою CSS, щоб воно виглядало як посилання:

p.not-a-link { text-decoration: underline; cursor: pointer } 

Або ще краще просто зробити це посиланням і дозволити функцію javascript, яка використовується e.preventDefault()для запобігання посилання.

Також додайте посилання, щоб hrefкористувачі без увімкненого JS все ще могли використовувати його (як запасний варіант).


1
+1 З завершенням дискусії IE5.5, чи буде проміжок часу кращий, ніж ap?
amelvin

1
Я віддаю перевагу прольоту. Р міг зробити новий ряд, тоді як span не
Ronnie Oosting

9

<a href="javascript:;">Link text</a> - цим я зазвичай користуюся


5
Чи не перезавантажить сторінку деякі браузери?
Курт

@Curt: Ви; ви праві, неправильно прочитали питання. У вас є коментар "за" проти :-)
Скотт Браун

... і у мене є 2 проти, в тому числі один після редагування! Суворо!
Скотт Браун,

Видаліть перший код, тоді мені буде дозволено видалити свій голос проти :) Це не дозволить мені видалити голос проти, його "заблоковано"
Curt

1
На які браузери це впливає, це все ще проблема? Цю перевагу віддають перевазі void(0), оскільки вона з’являється у рядку стану. Я кажу це тому, що у мене користувачі позначають це як помилку / помилку (а це, очевидно, не є), тому я думаю, що їх наявність їх бентежить.
chunk_split

4

Ми можемо досягти цього, використовуючи javascript void, який зазвичай включає оцінку виразу і повернення undefined, що включає додавання javascript:void(0);в href.

Оператор void зазвичай використовується лише для отримання невизначеного примітивного значення, як правило, використовуючи “void (0)” (що еквівалентно “void 0”). У цих випадках замість цього може бути використана глобальна змінна undefined (припускаючи, що їй не присвоєно значення, яке не за замовчуванням).

a {
  text-decoration: initial;
}
<a href="javascript:void(0);"> This link actually does nothing when clicked</a>


2

Відповідь @ Curt буде працювати, але ви можете використовувати стиль курсора в css, щоб зробити його схожим на посилання, не заважаючи генерувати підроблене посилання. Використовуйте стрілку або вказівник залежно від відповідності браузера.

Перехресний вказівник відповідності браузера css (з посібника зі стилем курсору ):

element {
    cursor: pointer;
    cursor: hand;
}

@PeeHaa Просто використовуйте покажчик, лише якщо ви не хочете, щоб він працював у IE5.5 і раніше!
amelvin

3
Це те, що я сказав! Будь ласка, не згадуйте IE5.5: P Що стосується більш серйозної примітки, то IE5.5 є 0.17%. Якщо люди все ще користуються такою версією, вони не заслуговують перегляду веб-сторінок
PeeHaa

2

один із способів, про який ніхто не згадував, полягає в тому, щоб вказати href на порожнє місце локального файлу таким чином

<a href='\\'>my dead link</a>

чому? Якщо ви використовуєте фреймворк, такий як response або angular, компілятор видасть деякі попередження, які можуть забруднити ваш журнал або консоль. Цей прийом також не дозволить роботам або павукам неправильно пов’язувати речі.


-1

НЕ ВИКОРИСТОВУЙТЕ <a>... замість цього використовуйте, <span class='style-like-link'> а потім використовуйте клас, щоб стилізувати його як завгодно.


Немає нічого поганого у використанні прив'язувального тегу без самого посилання, не кажучи вже про те, що є багато випадків, коли було б набагато більше сенсу це робити, а не замінювати його на псевдо-прив'язувальний тег. Не кажучи вже про стиль одного елементу, щоб він виглядав як інший, але буде реалізований по-іншому, це обов'язково спричинить проблеми з технічним обслуговуванням у майбутньому
Тім,

Домовились. Це повністю залежить від варіанту використання та того, що ви намагаєтесь досягти. Я просто дав це як відповідь, щоб допомогти іншим зрозуміти, що це варіант АН.
Bryce

Якщо це так, я б запропонував відредагувати його, використовуючи мову, яка показує, що це можлива альтернатива, а не заголовок, щоб не використовувати стандартний тег прив’язки для цього, коли це цілком допустимо
Тим,
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.