Tabs

Code

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="ajax-content.html">AJAX Tab</a></li>
  </ul>
  <div id="tabs-1"><p>Static content 1.</p></div>
  <div id="tabs-2"><p>Static content 2.</p></div>
</div>

<script>
$("#tabs").tabs({
  active: 0,
  collapsible: false,
  event: "click",
  heightStyle: "auto",
  beforeLoad: function(event, ui) {
    ui.jqXHR.fail(function() {
      ui.panel.html("Failed to load content.");
    });
  },
  activate: function(event, ui) {
    console.log("Switched to tab:", ui.newTab.index());
  }
});

// Programmatic tab switch
$("#tabs").tabs("option", "active", 2);
</script>

Explanation

Builds tabbed panels from an unordered list of anchors paired with content divs; anchors pointing to URLs load content via AJAX. The beforeLoad hook gives access to the jqXHR for error handling, and activate fires after every switch. Use the active option by index to programmatically change tabs.

More jQuery UI Snippets