How Can I Create An Empty Html Anchor So The Page Doesn't "jump Up" When I Click It?

I'm working on some JQuery to hide/show some content when I click a link. I can create something like: But if I click that link while I

Solution 1:

Put a "return false;" on the second option:

<ahref=""onclick="jquery_stuff; return false;" />

Solution 2:

You need to return false; after the jquery_stuff:

<ahref="no-javascript.html"onclick="jquery_stuff(); return false;" />

This will cancel the default action.

Solution 3:

You can put simply as like below:

<ahref="javascript:;"onclick="jquery_stuff">

Solution 4:

jQuery has a function built in for this called preventDefault which can be found here: http://api.jquery.com/event.preventDefault/

Here's their example:

<script>
$("a").click(function(event) {
    event.preventDefault();
});
</script>

You can also build the link like this:

<ahref="javascript:void(0)"onclick="myJsFunc();">Link</a>

Solution 5:

Check eyelidlessness' comment (use a button, not an anchor). Was just about to post the same advice. An anchor that doesn't link to a resource and merely executes a script should be implemented as a button.

Stop putting your event handlers in HTML, and stop using anchor tags that don't serve anchor semantic purposes. Use a button and add the click handler in your Javascript. Example: HTML <button id="jquery_stuff">Label</button> and JavaScript $('#jquery_stuff').click(jquery_stuff);. You can use CSS to style the button to look like a link, by removing padding, borders, margin and background-color, then adding your link styles (eg. color and text-decoration). – eyelidlessness Oct 19 '10 at 17:40