javascript - Prevent href="#" link from changing the URL hash

Question

I have a site that already takes advantage of the hash in the URL and I don't want it changed. When I use Zurb Foundation and use href="#" for the menu item, clicking on it removes the previous hash value.

How can I override this behavior?

Update: I think that it's better to stay with element because when I change it, it changes the styling that is bound to that HTML element. I always prefer when using with a design framework to stay with the default conventions and not mess with overriding css attributes.

thanks.

Answer 1

You can listen for the click event and call preventDefault to stop the browser from setting the hash.

Example with jQuery:

$('.mylink').click(function(event){
    event.preventDefault();
});