I'm working on some JQuery to hide/show some content when I click a link. I can create something like:
<a href="#" onclick="jquery_stuff" />
But if I click that link while I'm scrolled down on a page, it will jump back up to the top of the page.
If I do something like:
<a href="" onclick="jquery_stuff" />
The page will reload, which rids the page of all the changes that javascript has made.
Something like this:
<a onclick="jquery_stuff" />
Will give me the desired effect, but it no longer shows up as a link. Is there some way to specify an empty anchor so I can assign a javascript handler to the onlick event, without changing anything on the page or moving the scrollbar?
Source: Tips4all, CCNA FINAL EXAM
Put a "return false;" on the second option:
ReplyDelete<a href="" onclick="jquery_stuff; return false;" />
You need to return false; after the jquery_stuff:
ReplyDelete<a href="no-javascript.html" onclick="jquery_stuff(); return false;" />
This will cancel the default action.
You can put simply as like below:
ReplyDelete<a href="javascript:;" onclick="jquery_stuff">
<a href="javascript:;" onclick="jquery">link</a>
ReplyDeletehref requires something in there if you want it to not pop up errors in validators for html. The javascript:; is a good place holder.
If you really want to use the #:
<a href="#me" name="me" onclick="jquery">link</a>
Be careful with the return false;, it halts default behaviours of whatever you are doing.
Also if your js is like a submit you may run into problems in internet explorer.
<a href="javascript:// some helpful comment " onclick="jquery_stuff" />
ReplyDeleteI usually use a <span> and style it to look like a link when I need to accomplish something like this.
ReplyDeleteUsually I do:
ReplyDelete<a style="cursor:pointer;" onclick="whatever();">Whatever</a>
How about this:
ReplyDelete<a href="#nogo" onclick="foo();">some text</a>
jQuery has a function built in for this called preventDefault which can be found here:
ReplyDeletehttp://api.jquery.com/event.preventDefault/
Here's their example:
<script>
$("a").click(function(event) {
event.preventDefault();
});
</script>
Check eyelidlessness' comment. 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.
ReplyDelete