Search code examples
jqueryhtmlhref

behavior of HTML <a> tag when href=""

I have this HTML code (JSFiddle)

There I have used an < a > tag with href=""

I cannot get the expected functionality(simply show and hide a div). But when I changed it to href="#" it works fine.

Why is it acting like that when I use href=""?

Can anybody please explain this behavior ?

Solution

  • Your click event is also ending up triggering the href. In the case of the empty link, this is causing a page refresh, whereas in the case of the # it simply goes to a page anchor. In your click method, use preventDefault() to stop the link from getting followed. See documentation:

    http://api.jquery.com/event.preventdefault/

    To specifically answer with relation to your code, you would change to this:

        $(document).ready(function(){
    $('#inboxHeaderLink').click(function(e) {
        e.preventDefault();
        $('#newMessage').show();
        $('#viewMessage').hide();
    });
});