jquery tabs to open the tab with a specific class

I've been having a problem that took more time than it should. I am using jquery.tabs.js, there is a tab container that contains months and inside each month there is a ul list containing items. The page is called "Past Items" so when the user opens this page today let's say, yesterday's item will have a class "selected-item" and it will be 开发者_Go百科highlighted, and the container month or tab will have a class "selectedmonth", the question is how can I make this tab opens once the page is accessed? The 1st tab opens by default. check: past items

and click on May. I hope I could explain what I need :) Thanks!

You must use the "selected" option

$("#your_tabs").tabs({ 
    [ ... your options ... ]
    selected: X
});

With X being the zero-based index of the tab to open (in your exemple X needs to be 4).

To select the tab after initialization, you can use the select() method

$("#your_tabs").tabs("select", X);

I think you need a little JQuery+CSS Hack.

1- Remove tabs-selected class from every tab

$(".monthscontainer li").removeClass("tabs-selected");

2- Add a tabs-selected class to the current month , it shows the fifth month will be highlighted:

$(".monthscontainer  li:nth-child(5)").addClass("tabs-selected");

or

$(".selectedmonth").addClass("tabs-selected");

3- add tabs-hide class to the first tabdiv

$(".tabs-container:first").addClass("tabs-hide");

4- remove tabs-hide on the fifth div.

$("#2011-5").removeClass("tabs-hide");

Yes , I know it is a hack, but it seems Jquery UI tab doesn't contain the different selection as default instead of first tab.

I am sorry, lepidosteus is right, the easiest way if you put the selection in the load function:

$( ".months" ).tabs( "option", "selected", 5 );

You can read more here about this