Naming the tabs
You can load the page so that a specific tab is initially opened. This happens by naming the tabs and opening the page so that the name is given in the URL's anchor. When this page is opened, the second tab is initially opened. Look for the URL which has the anchor #second.
First pane. open third tab
Second pane. You can open other tabs with normal
anchor links
Third tab content
As you can see, the panes have regular anchor links. If those anchor links match the names of the tabs, those tabs are automatically opened.
HTML coding
Look for the tab names in the href attribute and those links inside the panes:
<!-- the tabs -->
<ul class="tabs">
<li><a href="#first">Tab 1</a></li>
<li><a href="#second">Tab 2</a></li>
<li><a href="#third">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>
First pane. <a href="#third">open third tab</a>
</div>
<div>
Second pane. You can open other tabs with normal
<a href="#first">anchor links</a>
</div>
<div>
Third tab content
</div>
</div>
Tab construction is identical to the minimal setup. There is nothing special here.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});
