title: history.js confusion
body: <p>I am totally new to AJAX and history.js.  I want to make a basic site that uses AJAX to change the content area when a nav item is clicked, preserve back button functionality as well as allow the user to type in the direct URL, such as mysite.com/page2, and have it load page2 in the content area.
  <br /><br />
  I have no idea what I'm doing but history.js (<a href="https://github.com/browserstate/ajaxify" rel="nofollow">as seen here</a>) looks like what I need.  In testing it out, I have no idea where to go from here.  Any help is greatly apprecieted!</p>
  
  <p>--Edited jQuery script</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;test page&lt;/title&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- jQuery ScrollTo Plugin --&gt;
      &lt;script defer src="http://balupton.github.com/jquery-scrollto/scripts/jquery.scrollto.min.js"&gt;&lt;/script&gt;
      &lt;!-- History.js --&gt; 
      &lt;script defer src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"&gt;&lt;/script&gt;
      &lt;!-- This Gist --&gt;
      &lt;script defer src="http://gist.github.com/raw/854622/ajaxify-html5.js"&gt;&lt;/script&gt;  
  
      &lt;script type="text/javascript"&gt;
          $(window).bind("statechange", function(e) {
              var State = window.History.getState();
              if (window.console &amp;&amp; window.console.log) {
                  console.log("popstate", State, window.location.href);
              }
              $("#changehere").text(typeof State.data.changehere !== 'undefined' ? State.data.changehere : State.url);
              $('.nav').click(function() {
                  alert(this);
                  window.History.pushState({changehere:this}, this + 'title', '?' + this);
              })
          })
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          #one {
              height: 300px;
              width: 1000px;
              background: #a0a0a0;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="one"&gt;
          &lt;a href="xml/first.html" id="first"&gt;change1&lt;/a&gt;
          &lt;a href="xml/second.html" id="second"&gt;change2&lt;/a&gt;
          &lt;a href="xml/third.html" id="third"&gt;change3&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="changehere"&gt;
          start
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>