jQuery UI Tabs

The jQuery UI tabs() widget turns a list of links and their matching content panels into a classic tabbed interface - only the active tab's panel is visible, and clicking another tab (or link) swaps which panel shows, without a full page reload.

1) Basic Tabs


<!-- markup: a <ul> of links to #fragment ids, each matched by a panel with that id -->
<div id="tabs">
  <ul>
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
  </ul>
  <div id="tab-1"><p>First panel content.</p></div>
  <div id="tab-2"><p>Second panel content.</p></div>
</div>

$('#tabs').tabs(); // jQuery UI wires the click handlers and toggles panels
Try it Yourself »

2) The active option


// pick which tab (zero-based index) is open when the widget is created
$('#tabs').tabs({
  active: 1 // opens "Tab 2" by default
});

// switch tabs programmatically at any time, e.g. from a button click
$('#tabs').tabs('option', 'active', 2);
Try it Yourself »

3) The activate event


$('#tabs').tabs({
  activate: function(event, ui){
    // ui.newTab / ui.newPanel = the tab & panel that just became active
    // ui.oldTab / ui.oldPanel = the tab & panel that just lost focus
    console.log(ui.newTab.text());
  }
});
Try it Yourself »

4) AJAX-loaded tabs (concept)


// give a tab's <a> a real URL instead of a "#fragment" and jQuery UI will
// fetch that URL over AJAX and drop the response into the tab panel
<li><a href="remote-content.php">Remote Tab</a></li>

$('#tabs').tabs(); // no extra config needed - detected automatically from the href
Try it Yourself »
Note: The AJAX demo above doesn't call a real server - it simulates the swap locally so the example keeps working with no backend. In a real project, point the tab's href at an endpoint that returns an HTML fragment.

Live Demo

Click between the tabs below - this is a real, working tabs() widget. The button jumps to Tab 3 programmatically via the active option.

HTML structures your page's content with elements and tags.

CSS controls layout, color, and typography for that structure.

jQuery (and jQuery UI) adds behavior and ready-made widgets like this one.