Selecting a jQuery Tab using a parameter in the URL

Jquery-UI give you that for (almost) free : Use the internal links. And it’s better than using ugly get parameters.

Passing http://my.site.org/mypage/#foo-tab in your navigator will automaticly select the tab with the container having id=”foo-tab”.

The trick is to add an event to update the url when selecting a tab so that when you reload you do not lose the current tab :

   $(document).ready(function () {
        $("#tabs").bind('tabsselect', function(event, ui) {
            window.location.href=ui.tab;
        });
    });

Leave a Comment