O'Reilly logo

jQuery Tools UI Library by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Tabs in action

It's time to take a look at the fourth and final part of the UI Tools section of jQuery Tools—that of Tabs.

Tabs can be described as one of the most popular user interfaces on the Internet. This is for good reason since they are easy to use and contain lots of information in a confined space, which you can then organize in a more user-friendly manner. Let's have a look at them in a little more detail.

Usage

The basic structure of Tabs is as follows:

<!-- the tabs -->
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>pane 1 content</div>
<div>pane 2 content</div>
<div>pane 3 content</div>
</div>

These would then be activated ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required