I want a link that does nothing. I don't want this:
<a href="#">
because then the URL becomes something.com/whatever/#.
The only reason I want a link is so the user can see that they can click on the text. JavaScript is being used to perform some action so I don't need the link to go anywhere but I need it to look like a link!
I could use some data attribute and tell me CSS to make elements look like links if they have this attribute but it seems a bit overkill.
The following will prevent your href from being ran
<a href="#" onclick="return false;">
If you are using jQuery, event.preventDefault() can be used
Try this:
<a href="javascript:void(0);">link</a>
In HTML5, this is very simple. Just omit the href attribute.
<a>Do Nothing</a>From MDN on the a tag href attribute:
href
This was the single required attribute for anchors defining a hypertext source link, but is no longer required in HTML5.
The default styles for a browser may not change the cursor to a pointer, for a tags with no href. You can universally change this with the following CSS.
a {
cursor: pointer;
}<a>Do Nothing</a>However it's probably better to be more-selective about it, and apply it to only the elements you intend to add event handlers to.
Just add tabindex="0" to the element.
<a tabindex="0">Do Nothing</a>a tag without a link?Usually no, it's probably better to use a button element instead, and style it with CSS. But whatever you use, avoid using an arbitrary element like div when possible, as this is not semantic at all.
Proper:
<a href="#;">Link</a>
Don't make it a link (although it is prefered to do it) and style it with CSS so that it looks like a link:
p.not-a-link { text-decoration: underline; cursor: pointer }
Or even better just make it a link and let the javascript function which is used e.preventDefault() to prevent the link.
Also add the link to the href so that users without JS enabled will still be able to use it (as a fallback).
<a href="javascript:;">Link text</a> - that's what I usually use
We can achieve that using javascript void which normally involves evaluation of an expression and returning undefined, which includes adding javascript:void(0); on the href.
The void operator is usually used merely to obtain an undefined primitive value, usually using “void(0)” (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).
a {
text-decoration: initial;
}<a href="javascript:void(0);"> This link actually does nothing when clicked</a>
one way which no one has mentioned is to point the href to an empty local file location like so
<a href='\\'>my dead link</a>
why? If you use a framework such as react or angular, the compiler will spit out some warnings which can make your log or console dirty. This technique will also prevent robots or spiders from incorrectly linking things.
@Curt's answer will work, but you can use a cursor style in css to make it look like a link without the bother of generated a bogus link. Use hand or pointer depending on browser conformance.
Cross browser conformant pointer css (from cursor style guide):
element {
cursor: pointer;
cursor: hand;
}
What if you use only css?
pointer-events: none;
span, a {
color: black;
cursor: default;
pointer-events: none;
text-decoration: none;
}<span>Normal text --> <a href="https://google.com">Link to google click me</a> <-- another text</span>
Text goes here When clicked this link will do nothing except display a little javascript:void(0) in the corner
DONT USE <a>... instead use <span class='style-like-link'>
and then use the class to style it however you want.
