Question

I have 2 links that hide present different information to the users on the main page. If one link is clicked, the new info appears on screen. Problem is, when I click on any of the links, the window is taken back to the top of the page. I would like to prevent this behavior as it is annoying.

Here is the code for the links

<div align="right" id="ajaxIncomingMail"><a href="#" class="incomingMail">Incoming Mail</a></div><div id="ajaxOutgoingMail"><h5><a href="#" class="outgoingMail">Outgoing Mail</a></h5></div>

and here is the code for the jquery:

        $(function(){
      $("a.incomingMail").click(function(e){
            e.preventDefault();
            $("#ajaxMailShowContentOutbox").hide();
            $("#ajaxMailShowContentInbox").fadeIn("slow");
        });

        $("a.outgoingMail").click(function(e){
            e.preventDefault();
            $("#ajaxMailShowContentInbox").hide();
            $("#ajaxMailShowContentOutbox").fadeIn("slow");
        });
        return false;
    });

Here I am using preventDefault() and it’s still not working!? I also tried return false, but that didn’t work also. I don’t know if it matters, but the info that is presented is pulled with php from the db. How can I make the scrolling stop when I click on the link??

Answer 1

Shouldn’t the return false; be within the actual jQuery click event and not outside it?

edit

    $(function(){
  $("a.incomingMail").click(function(e){
        e.preventDefault();
        $("#ajaxMailShowContentOutbox").hide();
        $("#ajaxMailShowContentInbox").fadeIn("slow");
        return false;
    });

    $("a.outgoingMail").click(function(e){
        e.preventDefault();
        $("#ajaxMailShowContentInbox").hide();
        $("#ajaxMailShowContentOutbox").fadeIn("slow");
        return false;
    });

});