This is a message.

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
standalone demo

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>

HTML

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


JavaScript