Question

I’m still pretty new to javaScript/jQuery, so I’m sorry if this seems elementary.

I know that I can change the hash of the url onClick, but can I addClass/removeClass from an element, hide/show an element, fadeIn/fadeOut an element based on the hash in the url?

I’m trying to make a website with all the content on one page (home, about, image gallery, etc…) and then just hide some content and show other content onClick or onHover. But I also want to keep the functionality of a url that can take you to a specific location on the site, so is there a way of using javaScript or jQuery to trigger events based on the hash of the url?

like if hash = #gallery, then show the gallery elements.

Answer 1

If the page actually reloads (default link behaviour) just make sure a jquery script runs to check the hashvalue.

var currentValue = window.location.hash.substr(1);
$(document).ready(function() {
  //Page loaded..
  alert('Do something with the current value');
});

If the page does’nt reload just make a $(‘a’).click(); function that responds to the hashvalue like this example:

$(document).ready(function() {
    $('a').click(function() {
      var value = $(this).prop('href').substr(1); //remove hash using substr(1)
      alert('do something else with the '+value+' value!');
      return false; //stop default link behaviour
    });
});