title: Ajax hash in url
body: <p>I am using code from <a href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/" rel="nofollow">this tutorial</a></p>
  
  <p>In the URL, it is weird; If I were to click on home, it'll go to <code>example.tld/home#</code>, but I would like to have the hash on the back. <code>example.tld/#home</code>. If I were to go to the contact page, it'll display as <code>/home#co</code> … doesn't display the whole word. (contact). I would like <code>#contact</code> to replace <code>#home</code> when I change the page. Also how can I land on a different page on load instead of <code>#home</code> again? Example: click on <code>example.tld/#contact</code>, goes to <code>#contact</code> page.</p>
  
  <p>Also...Here is the code I have modified from the <a href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/" rel="nofollow">tutorial</a>:</p>
  
  <pre><code> // Check for hash value in URL  
      var hash = window.location.hash.substr(1);  
      var href = $('nav ul li a').each(function(){  
          var href = $(this).attr('href');  
          if(hash==href.substr(0,href.length-5)){  
              var toLoad = hash+'.html #main-content';  
              $('#content').load(toLoad)  
          }  
      });  
  
      $('nav ul li a').click(function(){  
  
      var toLoad = $(this).attr('href')+' #main-content';  
      $('#main-content').hide('fast',loadContent);  
      $('#load').remove();  
      $('#wrapper').append('&lt;span id="load"&gt;LOADING...&lt;/span&gt;');  
      $('#load').fadeIn('normal');  
      window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
      function loadContent() {  
          $('#main-content').load(toLoad,'',showNewContent())  
      }  
      function showNewContent() {  
          $('#main-content').show('normal',hideLoader());  
      }  
      function hideLoader() {  
          $('#load').fadeOut('normal');  
      }  
      return false;  
  
      });
  </code></pre>
  
  <p>Think I should cach some of the selectors that are being repeated?</p>
  
  <p>Also here is the <strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="main-content" class="home"&gt;
  
  … content to be loaded
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Nav:</strong></p>
  
  <pre><code>&lt;nav&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="about"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
  </code></pre>
  
  <p>I'm using htaccess so I do not have to include the file extension, but if its needed, the files are .php</p>
  
  <p>Let's say i'm on <code>#home</code> and if I click the <code>#home</code> link again, it'll reload the same page, is there any way to stop this if i'm already on that page?</p>