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

javascript html zurb-foundation
Idan Shechter picture Idan Shechter · Nov 26, 2013 · Viewed 91.7k times · Source

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

Ben Hutchison picture Ben Hutchison · Nov 26, 2013

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();
});

Related questions

How to use google.maps.event.trigger(map, 'resize')

I am new to JS, and have found the answer to a previous question, which brought up a new question, which brought me here again. I have a Reveal Modal that contains a Google Map API. When a button is …

Read More
Search HTML table with JS and jQuery

I made a table and wanted to make it searchable, so I googled and looked here at starckoverflow. But somehow, the things I've found, that should work, dont work for me? Here is the code, both HTML and JS. <!…

Read More
HTML / Javascript - Expand and collapse table rows (childs) by clicking on a parent row

I am trying to solve one issue since days and finally understood that I will not succeed without help ... I want to do a common thing that we see on internet everyday : be able to click on a table row …

Read More