Chcę linku, który nic nie robi. Nie chcę tego:
<a href="#">
ponieważ wtedy URL staje się something.com/whatever/#
.
Jedynym powodem, dla którego chcę linku, jest to, aby użytkownik mógł zobaczyć, że może kliknąć tekst. JavaScript jest używany do wykonywania pewnych czynności, więc nie potrzebuję linku, aby nigdzie iść, ale chcę, aby wyglądał jak link!
Mógłbym użyć atrybutu danych i powiedzieć mi CSS, aby elementy wyglądały jak linki, jeśli mają ten atrybut, ale wydaje się to trochę przesadzone.
something.com/whatever/#
?pointer
w swoim CSSOdpowiedzi:
Poniższe działania zapobiegną uruchomieniu twojego href
<a href="#" onclick="return false;">
Jeśli używasz jQuery,
event.preventDefault()
może być używanyźródło
Spróbuj tego:
<a href="javascript:void(0);">link</a>
źródło
javascript:void
ijavascript:void(0)
?javascript:void()
będzie SyntaxError, alejavascript:void
po prostu zwraca undefined - tak samo jakvoid(0)
. Adam, o ile wiem,void
ivoid(0)
są funkcjonalnie równoważne dla tego zastosowania. --- edit: chociaż widzę inne komentarze, które sugerują, że może to przeładować stronę ..W HTML5 jest to bardzo proste. Po prostu pomiń
href
atrybut.<a>Do Nothing</a>
Z MDN w atrybucie a tag href :
A co z kursorem dłoni po najechaniu kursorem?
Domyślne style przeglądarki mogą nie zmieniać kursora na wskaźnik, dla
a
znaczników bezhref
. Możesz to uniwersalnie zmienić za pomocą następującego kodu CSS.a { cursor: pointer; }
<a>Do Nothing</a>
Jednak prawdopodobnie lepiej jest być bardziej selektywnym i stosować go tylko do elementów, do których chcesz dodać programy obsługi zdarzeń.
A co powiesz na to, aby można było na niej ustawić fokus?
Po prostu dodaj
tabindex="0"
do elementu.<a tabindex="0">Do Nothing</a>
Czy ma sens używanie
a
tagu bez linku?Zwykle nie, prawdopodobnie lepiej jest
button
zamiast tego użyć elementu i nadać mu styl za pomocą CSS. Ale bez względu na to, czego używasz, unikaj stosowania arbitralnych elementów, takich jakdiv
jeśli to możliwe, ponieważ nie jest to wcale semantyczne.źródło
Nie rób z tego linku (chociaż jest to preferowane) i stylizuj go za pomocą CSS, aby wyglądał jak link:
p.not-a-link { text-decoration: underline; cursor: pointer }
Lub jeszcze lepiej po prostu uczyń go linkiem i pozwól funkcji javascript, która jest używana
e.preventDefault()
do blokowania linku.Dodaj również link do
href
, aby użytkownicy bez włączonego JS nadal mogli z niego korzystać (jako rozwiązanie awaryjne).źródło
<a href="javascript:;">Link text</a>
- tego zwykle używamźródło
void(0)
, ponieważ pojawia się na pasku stanu. Mówię to, ponieważ użytkownicy zgłaszają to jako błąd / błąd (którym oczywiście nie jest), więc myślę, że jest to dla nich mylące.Możemy to osiągnąć za pomocą javascript void, który zwykle obejmuje ocenę wyrażenia i zwrócenie undefined, co obejmuje dodanie
javascript:void(0);
atrybutu href.Operator void jest zwykle używany tylko do uzyskania niezdefiniowanej wartości pierwotnej, zwykle przy użyciu „void (0)” (co jest równoważne z „void 0”). W takich przypadkach można zamiast tego użyć zmiennej globalnej undefined (zakładając, że nie została ona przypisana do wartości innej niż domyślna).
a { text-decoration: initial; }
<a href="javascript:void(0);"> This link actually does nothing when clicked</a>
źródło
Odpowiedź @Curt będzie działać, ale możesz użyć stylu kursora w css, aby wyglądał jak link bez kłopotów z wygenerowaniem fałszywego linku. Użyj dłoni lub wskaźnika w zależności od zgodności przeglądarki.
Wskaźnik CSS zgodny z przeglądarkami (z przewodnika po stylach kursora ):
element { cursor: pointer; cursor: hand; }
źródło
0.17%
. Jeśli ludzie nadal korzystają z tej wersji, nie zasługują na przeglądanie siecijednym ze sposobów, o którym nikt nie wspomniał, jest wskazanie href do pustej lokalizacji pliku lokalnego, tak jak to
<a href='\\'>my dead link</a>
czemu? Jeśli używasz frameworka takiego jak reaguj lub angular, kompilator wypluje pewne ostrzeżenia, które mogą zabrudzić dziennik lub konsolę. Ta technika zapobiega również nieprawidłowemu łączeniu elementów przez roboty lub pająki.
źródło
NIE UŻYWAJ
<a>
... zamiast tego użyj,<span class='style-like-link'>
a następnie użyj klasy, aby nadać jej styl, jak chcesz.źródło