How to make an anchor tag refer to nothing?
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 */
});
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.