javascriptajax

Attaching hashtag to URL with javascript


I want to build an ajax site without sacrificing SEO. My question is: If I have link on my page like this:

   <a href="http://example.com/cats" id="cats">Cats</a>
   <a href="http://example.com/dogs" id="dogs">Dogs</a>

...when each link is clicked I would like to update the address bar with the corresponding hashtag. So, if "Cats" link is clicked the current location will be http://example.com/#cats and I can use this to show my ajax content. If javascript is off or user is search engine, they will go directly to /cats


Solution

  • You can change the location.hash property, it will change the current anchor identifier without navigating away form the page, for example you could:

    <a href="http://mysite.com/cats" id="cats" class="ajaxLink">Cats</a>
    <a href="http://mysite.com/dogs" id="dogs" class="ajaxLink">Dogs</a>
    

    Then:

    $('.ajaxLink').click(function (e) {
      location.hash = this.id; // get the clicked link id
      e.preventDefault(); // cancel navigation
    
      // get content with Ajax...
    });​