Opening page with tab preselected that's not the first tab

Question

I have a page with a jqueryui tabset on it. I'd like to be able to open the page with tab other than the first tab selected. If I have four tabs on the page I need to be able to select any of the four to be the 'open' tab.

This maybe a link from another page or a link from a page in the same frameset.

Under the covers everything is PHP.

Answer 1

You'll want to select a tab on the initial load of the page through JavaScript. Here's an example of how to select a tab:

http://docs.jquery.com/UI/API/1.7/Tabs#method-select

<script type="text/javascript">
  $(function() {
    $("#tabs").tabs( 'select' , index )
  });
</script>

Where the index variable is the integer of the tab you want to have selected. It is 0 based, so if you want the third tab selected, you'll want to specify 2 for index.

You'll want to do this once the page is ready:

http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 2

The answers above are no longer valid with the current version of jQuery UI v1.10.0. As per the jQuery UI API, the option is now active and no longer select.

Here's a link to the API: http://api.jqueryui.com/tabs/#option-active

Initialize the tabs with the active option specified:

$(".selector").tabs({ active: 1 });

Answer 3

Preselecting a tab can be done with the selected option when initializing the tabs.

$("#tabs").tabs({
    selected: index //index of the tab to be preselected
});

One case where this is important is when the tab at index 0 is loaded with ajax. If you initialize the tabs as usual and then use the select method to change the selected tab, an ajax request will initially be sent to load tab 0. But since you want to show the other tab right away, this request is unnecessary. The selected option allows you to skip this request.