Set default tab with jQuery Tools

Question

OK, be sure you understand that this is with jQuery Tools (http://jquerytools.org/), not jQuery UI.

I need to know if there is a way to set a default tab via the actual HTML code. The setup code looks like this:

jQuery("ul.tabs").tabs("div.panes > div");

and the HTML is like this:

<div class="tabs-container">
<ul class="tabs ">
<li class="w3"><a href="#" class="current">The active tab</a></li>
<li class="w3"><a href="#">Another tab</a></li>
<li class="w3"><a href="#">Third tab</a></li>
</ul>
<div class="panes">
<div style="display: block;">
Content of first tab
</div>
<div style="display: none;">
Second tab contents
</div>
<div style="display: none;">
Third tab contents
</div>
</div>

I already tried giving the 2nd tab's anchor the class of "current", that didn't work.

Answer 1

After the tabs have been initialized you can get the tab scripting API handle and then select the tab:

var api = $("ul.tabs").data("tabs");
api.click(1);

The complete reference is here under "Scripting API": http://jquerytools.org/documentation/tabs/

Answer 2

You need to use the initialIndex property as part of the 2nd argument when you setup the tabs in a script on the page.

Here's a link to a fiddle with the initial index set to "1" which displays the 2nd tab by default instead of the first as the tab index starts at zero. http://jsfiddle.net/switchweb/pPMRX/

The script to set it up using the initialIndex property is as follows (you would substitute "1" here for the number of the TAB you wanted to be "current" when the page is initially displayed, where the first tab is 0, second is 1, etc).

    $("<tabs_selector>").tabs("<pane_selector>",  {initialIndex: 1} );