How to make the "<a href" tag refer to nothing?

Question

Hello How to make the "< a href" tag refer to nothing?

because I use jQuery

I need to make some anchor taks refer to nothing

I usually write it like this

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

however this refer to the top of the page!

Answer 1

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

Answer 2

What do you mean by nothing?

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

or

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

Answer 3

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.

Answer 4

To make it do nothing at all, use this:

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

Answer 5

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 http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void/

Answer 6

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.