jQuery Show/Hide Question

Question

I\'m just trying to preform a very simple jQuery action.

I have two components: #safety and #safety-tab a, the #safety needs to be

Answer 1

try return false as you are clicking on a link;

 $(document).ready(function() {
   $("#safety-tab a").click(function() {
     $(this).hide();
     $("#safety").removeClass("hide");  
     return false;
   });
   });

Answer 2

Add return false; or event.preventDefault() to your click handler.

$(document).ready(function() {
   $("#safety-tab a").click(function( event ) {
     $(this).hide();
     $("#safety").removeClass("hide");  
     event.preventDefault();
   });
});

This prevents the default behavior of the <a> element, which is reloading the page.

• http://api.jquery.com/event.preventDefault

Using event.preventDefault() will preserve event bubbling which is sometimes needed.

Doing return false; will prevent the default behavior, but it will also halt the bubbling.