How to make an anchor tag refer to nothing?

Solution 1:

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.

Solution 2:

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 */
});

Solution 3:

To make it do nothing at all, use this:

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