jQuery tabs

I’ve finally had a chance to implement a solution with jQuery tabs and I was very pleased with the simplicity of creating a very simple tabbed interface. I’ve used several tab solutions before the jQuery UI solution, and I definitely prefer the jQuery solution (yet again).

To set up a basic tabbed layout, start with an enclosing container followed immediately by an unordered list containing the tabs and then the containers for the actual tab content. For example:

<div id="example_tabs">
  <ul>
    <li><a href="#example_tab_1">Tab 1</a></li>
    <li><a href="#example_tab_2">Tab 1</a></li>
    <li><a href="#example_tab_3">Tab 1</a></li>
  </ul>
  <div id="example_tab_1">
    <p>Content for tab 1</p>
  </div>
  <div id="example_tab_2">
    <p>Content for tab 2</p>
  </div>
  <div id="example_tab_3">
    <p>Content for tab 3</p>
  </div>
</div>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#example_tabs').tabs();
  });
</script>

And here’s the result:

Obvious styling issues notwithstanding, I can’t imagine an easier way to build a tabbed interface for a web page. As always, read the manual for more information and enjoy!

If you enjoyed this article, please share it using Facebook Connect or AddThis and subscribe via rss.

Tagged as: Javascript, jQuery, jquery ui, tabs

Comments: