jQuery Address Plugin with Navigation and Tabs

Question

I'm having a little problem with jQuery Address Plugin.

I must add it to the navigation and to the tabs at the same time.

There are 2 problems that it seems I can't figure out.

1) When clicking on navigation element, instead of changing the location path to the path + href of the link, it adds it like so "home.html#/about.html".

2) And when we go to the tab part they change to the "id" but since the page is not changed from the location.path it adds it to the firs page that was clicked. => "home.html#direction-tab" And when this happens, I can't link to that tab since it's pointing to the home page instead of the contact page.

I read the documentation about the tabs (using jQuery UI), but since the html structure is a little different I prefer to added it as custom.

JS:

$.address.change(function(event) {
    if ( event.value != undefined && event.value != '/' ) {
        $('#content').load(event.value.replace(/\//,'')+ ' #content')
    }
})

I tried to add titles to the links and work with them like one of the exmaples in the live site, but I didn't seems to quite get the logic behind it.

jsFiddle

Answer 1

It seems I figure it out.

$(document).on('click', '.tabs a', function() {
    var internal_path = $(this).attr('rel').replace(/\w+\:/, '');
    var href = $(this).attr('href');
    $.address.value(internal_path+href);
    return false;
});