Set URL via selected jQuery tab

Question

Further to this question - and using the same getUrlParam.js plugin.

$(document).ready(function(){
var param = $(document).getUrlParam('tab');
$("#tabs").tabs();
$("#tabs").tabs('select', param);
});

With this code I am able to control which tab loads on a given page e.g. blogs/?tab=tv loads the tab #tv on the /blogs/ page.

However is there a way I can set the URL by clicking on the tabs themselves?

<ul id="mediatabs" class="tab-buttons">
<li class="TV"><a href="#TV">TV</a></li>
<li class="radio"><a href="#radio">Radio</a></li>
</ul>

i.e. clicking on the TV tab loads /?tab=tv?

I guess this is a workaround for the missing bookmarking functionality in Tabs 3.

Answer 1

Well, you're wanting to change a querystring parameter and not the hash of the url (http://www.example.com/page.html#this-is-a-hash). One approach is to use the select event which is triggered whenever a tab is clicked. Something like:

$('#tabs').bind('tabsshow', function(event, ui) {
    // TODO: compute the desired url and set window.location.href
});