1

I have a tabbed section on a website I'm currently developing, and would like to enable unique URLs for each tab, as well as history support.

It seems the jQuery Address plugin is the way to go, but I'm having trouble implementing it. I'm able to assign URLs and change the address bar. The back button traverses URLs, but doesn't actually change the tabs.

The Address documentation isn't great. I'm assuming I'm missing some sort of event listener, but I'm not sure how to initialize it or what to apply it to.

Here is my JS

$('.sm-tab').click(function() {
    $.address.value($('a', this).attr('href'));
    smReset();
    $('#sm-tabs').find('.active').each(function() {
        $(this).removeClass('active');
        $(this).addClass('inactive');
    });
    $(this).removeClass('inactive');
    $(this).addClass('active');
    var smClassArray = $(this).attr('class').split(" ");
    var smDivClass = smClassArray[1];
    $('#'+smDivClass).show();
});

My HTML looks something like this

<div id="sm-tabs">
    <div class="sm-tab inactive twitter">
        <span class="twitter sprite-sm-twitter"><a href="?tab=twitter" class="hidetext">Twitter</a></span>
    </div>
    <div class="sm-tab inactive youtube">
        <span class="youtube sprite-sm-youtube"><a href="?tab=youtube" class="hidetext">YouTube</a></span>
    </div>
</div>

<div id="sm-widgets">
    <div id="twitter">
        Content
    </div>
    <div id="youtube">
        Content
    </div>
</div>
Matt
  • 22,721
  • 17
  • 71
  • 112
Derek
  • 967
  • 1
  • 8
  • 16

1 Answers1

1

Using hashes for ajax navigation is going to open you to a whole can of worms.

Try this deep-linking script which uses the HTML5 History API instead.

balupton
  • 47,113
  • 32
  • 131
  • 182
  • I actually need to avoid using hashes completely. I have a YouTube auth redirect that overwrites and hashes when it comes back to my page. I was hoping I could get Address working without hashes, but it looks like that may not be possible? – Derek Aug 18 '11 at 13:24
  • Sure, use the deep linking script mentioned, but don't include `history.html4.js` which is the HTML4 Support (aka the hashes stuff). – balupton Aug 18 '11 at 16:47