This is a message.

AJAXed 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!

standalone demo

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>

HTML

JavaScript coding

We use the history plugin together with the ajax effect: 

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

JavaScript