AJAX:ed tabs with History support

Tabs demo 6 / 13 : AJAX:ed tabs with History support

These tabs combine the power of the history plugin and the AJAX effect. Notice that you can build your website's global navigation like this and it will also behave well on those browsers that do not support JavaScript at all!

• Tab 1
• Second tab
• An ultra long third tab

HTML Coding

We use anchor links (starting with #) on the tabs so that the history feature will work:

<!-- tabs -->
<ul class="css-tabs">
	<li><a href="ajax1.htm">Tab 1</a></li>
	<li><a href="ajax2.htm">Second tab</a></li>
	<li><a href="ajax3.htm">An ultra long third tab</a></li>
</ul>

<!-- single pane -->
<div class="css-panes">
	<div style="display:block"></div>
</div>

JavaScript coding

We use the history plugin together with the ajax effect:

$("ul.css-tabs").tabs("div.css-panes > div", {effect: 'ajax'}).history();