71

Is it possible to make a link that does nothing?

I want the item to be a link so I get the cursor to change on mouseover, but I don't want the link to actually go anywhere as it actually triggers the showing of a div with extra functionality on the same page.

7 Answers 7

142

Will add to the browser history:

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

Won't add to the browser history (preferred method):

<a href="javascript:;"></a>

5
  • 12
    Is this ok even if they have javascript turned off?
    – pingu
    Commented Feb 10, 2011 at 9:08
  • 4
    Yes, it will do nothing.
    – 54 69 6D
    Commented Feb 16, 2016 at 2:23
  • 2
    Just as a note, the latter does cause issues if you have an onclick function set. Commented Sep 5, 2017 at 19:06
  • 3
    Another note: href="javascript:;" is not, and has never been, the preferred method. Placing JS code in a HTML attribute should be avoided at all costs. Commented Nov 6, 2017 at 14:16
  • 2
    This navigates to the page top, though Commented Jun 27, 2022 at 13:20
20

In my opinion, the most complete hack free solution is:

<a href="" onclick="return false;">do absolutely nothing</a>
1
  • 2
    This solution seems to work the best for me, so far, since I want to use a JavaScript function in onclick (I just return false after it): e.g. <a href="" onclick="myFunction(); return false">my text</a> Commented Sep 5, 2017 at 19:23
18

Instead, you could use a <span> and set the cursor style:

<span id="node42" class="node-link">My Text</span>

And specify the cursor in your stylesheet:

.node-link { cursor: pointer; }

This would also allow you to attach to the node for your actions later (show here using Prototype):

<script type="text/javascript">
    $('node42').observe('click', function(event) {
      alert('my click handler');
    });
</script>
3
  • 1
    @Roger: using id allows the element to be uniquely identified, mostly useful for the javascript example in this case. You have a good point for the cursor. It is probably more of a class-based style. I've updated my answer. Thanks!
    – jheddings
    Commented Dec 2, 2009 at 6:32
  • 2
    This won't import the styling of hyper-links (like hyperlink colours, text-decoration...etc). Thus powers1's answer is better.
    – Pratyush
    Commented May 30, 2012 at 5:58
  • 1
    This will be bad for accessibility, due to lack of ARIA attributes or anything at all that will tell screen readers that this is an interactive element. It is not even accessible by tab navigation (pressing Tab key multiple times). Commented Feb 28, 2017 at 10:21
7

Just add the style cursor:pointer to the element:

<a id="clickme">Click Me</a>

CSS:

#clickme { cursor: pointer }

Or (heaven forbid) in-line:

<a style="cursor:pointer">Click Me</a>
2
  • 1
    You must have to use href="#". <a id="clickme">Click Me</a> will create problem. Commented Dec 2, 2009 at 6:42
  • @Umesh, what problem? The only "problem" is that hover styles won't work in IE6 and the cursor: pointer won't automatically be applied. Please explain. Commented Dec 2, 2009 at 6:55
4

Here are two classic JavaScript approaches that won't give you an error in your JavaScript console and/or don't change the URL nor save it to your browser history:

<a href="javascript:void(0);">Click on this JavaScript error-free link that won't change your URL nor save it into your browser history</a><hr />
<a href="#void">Maybe a more readable approach, but unfortunately this one changes your URL</a>

2

If you just want style, set the the CSS cursor property to pointer.

But it sounds like you want <a href="javascript:void(do_something())">.

1

I was looking for something simpler, and I think I found it. Do you want your link not to go anywhere? Omit the href.

<a class='irrelevant_for_this_example'>Some text</a>

href="#" will scroll to the top of the page.

href="javascript:;" seems dodgy.

A JavaScript solution seems unnecessary for something as simple.

2
  • 2
    Actually, I think the OP was probably using the link to trigger a collapsible/expandable box in JavaScript. I can confirm href="javascript:;" works for that. Removing the href means the browser doesn't treat it as a normal link, i.e., the mouse doesn't change to a finger when you hover over the link.
    – binaryfunt
    Commented Feb 8, 2015 at 23:19
  • Having said that, href="#void", or something like that, works, and may be better
    – binaryfunt
    Commented Feb 9, 2015 at 0:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.