Question

I want to build a basic anchor based navigation system using jQuery. I don’t really want to use a plugin like this as suggested here. Can anyone help me out with the basic logic of building a system like this?

Essentially I want to be able to have one page serve up multiple ajax content via links like this:

• /myurl.html#state1
• /myurl.html#state2

Currently I just bind to the click handler of links to open up dialogs etc. I could then change the URL to /myurl.html#state1. The question is do I do it this way, or do I just make the <a> tags themselves point to that url and then use jQuery to detect when the URL has changed meaning itll also work on page load too?

Any suggestions / thoughts would be great – thanks

Answer 1

<a href="#state1" rel="ajaxpage1.html"></a>
<a href="#state2" rel="ajaxpage2.html"></a>

$('a').each(function (i,obj){
   $(obj).click(function (){
       var url = $(obj).attr('rel');
       $..ajax({
          url: url,
          success: function (){...},
          error : function (){...}// incase you get a 404, or 500 and so on....
       });
   });
});

$(document).ready(function (){
   //if you need it on refresh, or if a user got the link from another page
   // it automatically will trigger the click therefore trigger the ajax
   if(window.location.hash != '#'){
      $('a[href="'+window.location.hash+'"]').click();
   }
});

I still thing you should use a plugin, as they have had bugs, and fixed them probably so you would have to test your thing, waste alot of time but your call 🙂