Blog / 2010 / September / 28

jQuery UI Tabs

September 28, 2010

Here's the structure you need to setup tabs using jQueryUI.

Imports

You'll need to include jQuery, jQueryUI and the jQueryUI css.

<script type="text/javascript" src="/site_media/jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/site_media/jqueryui/js/jquery-ui-1.7.1.custom.min.js"></script>
<link type="text/css" href="/site_media/jqueryui/css/smoothness/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />

HTML

Here's the HTML required for two tabs, one for summary and one for details. Place whatever you like inside the individual tab divs.

<div id="tabs">
  <ul>
    <li><a href="#summary-tab">Summary</a></li>
    <li><a href="#detail-tab">Detail</a></li>
  </ul>
  <div id="summary-tab">
  ...
  </div>
  <div id="detail-tab">
  ...
  </div>
</div>

JavaScript

Here's the JavaScript needed to build the tabs:

<script type="text/javascript">
$(document).ready(function() { 
        $("#tabs").tabs();
}); 
</script>

Tags: jqueryui jquery tabs