How to make an anchor tag refer to nothing?

I use jQuery, I need to make some anchor tags perform no action.

I usually write it like this:

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

However this refers to the top of the page!

There are a few less than perfect solutions:

1. Link to a fake anchor

<a href="#">

Problem: clicking the link jumps back to the top of the page

2. Using a tag other than 'a'

Use a span tag and use the jquery to handle the click

Problem: breaks keyboard navigation, have to manually change the hover cursor

3. Link to a javascript void function

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

Problem: breaks when linking images in IE

Solution

Since these all have their problems, the solution I've settled on is to link to a fake anchor, and then return false from the onClick method:

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

Not the most concise of solutions, but it solves all the problems with the above methods.

If you don't want to have it point to anything, you probably shouldn't be using the <a> (anchor) tag.

If you want something to look like a link but not act like a link, it's best to use the appropriate element (such as <span>) and then style it using CSS:

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

Also, given that you tagged this question "jQuery", I am assuming that you want to attach a click event hander. If so, just do the same thing as above and then use something like the following JavaScript:

$('#fake-link-1').click(function() {
    /* put your code here */
});

To make it do nothing at all, use this:

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

The correct way to handle this is to "break" the link with jQuery when you handle the link

HTML

<a href="#" id="theLink">My Link</a>

JS

$('#theLink').click(function(ev){
    // do whatever you want here
    
    ev.preventDefault();
    ev.stopPropagation();
});

Those final two calls stop the browser interpreting the click.

There are so many ways to do it like

Dont add and href attribute

<a name="here"> Test <a>

You can add onclick event instead of href like

<a name="here" onclick="YourFunction()"> Test <a>

Or you can add void function like this which would be the best way

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

What do you mean by nothing?

<a href='about:blank'>blank page</a>

or

<a href='whatever' onclick='return false;'>won't navigate</a>

This answer should be updated to reflect new web standards (HTML5).

This:

<a tabindex="0">This represents a placeholder hyperlink</a>

... is valid HTML5. The tabindex attribute makes it keyboard focusable like normal hyperlinks. You might as well use the span element for this as mentioned previously, but I find using the a element more elegant.

See: https://w3c.github.io/html-reference/a.html<br> and: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

I think you can try

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

The only catch I see over here is high level browser security may prompt on executing javascript.

Though this is one of the easier way than

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

this should be used sparingly

Read this article for some pointers https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

Here are the three ways for <a> tag's href tag property refer to nothing:

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

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

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

I know this is an old question, but I thought I'd add my two cents anyway:

It depends on what the link is going to do, but usually, I would be pointing the link at a url that could possibly be displaying/doing the same thing, for example, if you're making a little about box pop up:

<a id="about" href="/about">About</a>

Then with jQuery

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

This way, very old browsers (or browsers with JavaScript disabled) can still navigate to a separate about page, but more importantly, Google will also pick this up and crawl the contents of the about page.

Make sure all your links that you want to stop have href="#!" (or anything you want, really), and then use this:

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});

You can have an HTML anchor (a tag) without an href attribute. Leave off the href attribute & it won't link to anything:

<a>link</a>

The only thing that worked for me was a combination of the above:

First the li in the ul

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

Then in the LoadTab2_1 I manually switched the tab divs.

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

This is because the disconnection of the also disconnects the action in the tabs.

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");

You can do it by

<a style='cursor:pointer' >Link</a>

<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

this was my anchor tag. so return false on onClick="" event is not usefull here. I just removed href="#" property and it worked for me just like below

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

and i needed to add this css.

.SomeClass
{
    cursor: pointer;
}

I encountered this issue on a WordPress site. The headers on dropdown menus always had the attribute href="" and the header plugin being used only allowed standard urls. The easiest solution there was just to run this code in the footer:

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

This will prevent blank anchors from doing anything.

React no longer support using a function like this href="javascript:void(0)" in your anchor tag, but here is something that works pretty well.

<a href="#" onClick={() => null} >link</a>

I know this is tagged as a jQuery question, but you can answer this with AngularJS, also.

in your element, add the ng-click directive and use the $event variable which is the click event... prevent its default behavior:

<a href="#" ng-click="$event.preventDefault()">

You can even pass the $event variable into a function:

<a href="#" ng-click="doSomething($event)">

in that function, you do whatever you want with the click event.

In HTML5 just remove the href attribute

<a>Your text</a>