CODEWITHSUNDEEP
phpjqueryjquery-ui
Jason
Jason

Reputation: 15335

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

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.

Upvotes: 5

Views: 3114

Answers (4)

mikkelz
mikkelz

Reputation: 562

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 });

Upvotes: 2

Erdogan Kurtur
Erdogan Kurtur

Reputation: 3685

just add ui-tabs-selected class to intended <li> element.

jQuery will select which tab to activate by following path

  1. is selected option is set
  2. if not set, does location.hash matches any tab's hash of <a> tag
  3. if no hashes match, does any <li> element has ui-tabs-selected class
  4. if not try to select first not disabled (ui-state-disabled) tab

bit of an old question. answered since this page is the first on google

Upvotes: 1

Simen Echholt
Simen Echholt

Reputation: 11293

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.

Upvotes: 1

Dan Wolchonok
Dan Wolchonok

Reputation: 1940

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

Upvotes: 3

Related Questions