Can I configure the jQuery UI Tabs widget to go to a new page when the user clicks on a tab?

Question

The default way of using the jQuery UI Tabs widget is to have each tab's content in a div on the same html page. Is it possible for each tab to be a link to a different page?

Answer 1

Why would you use jQuery tabs instead of normal HTML <a> in that scenario?

I guess you could add a tab change hadler that navigates to a new address using window.location, like this:

$('#myTabs').tabs();
$('#myTabs').bind('tabsselect', function(event, ui) {
    // you can access clicked tab index as ui.index
window.location = "foo.html";
});    

EDIT, if you want to do this just for styling, you can simply add right classes to your elements:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Active tab</li>
        <li class="ui-state-default ui-corner-top">Inactive tab</li>
    </ul>
</div>

This will work even if user has disabled all javascript in the browser.