jQuery UI Tabs Example

A simple example showing how to use jQuery UI's tabs

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Lorum Ipsum 1</a></li>
        <li><a href="#tabs-2">Lorum Ipsum 2</a></li>
        <li><a href="#tabs-3">Lorum Ipsum 3</a></li>
        <li><a href="#tabs-4">Lorum Ipsum 4</a></li>
        <li><a href="#tabs-5">Lorum Ipsum 5</a></li>
        <li><a href="#tabs-6">Lorum Ipsum 6</a></li>
        <li><a href="#tabs-7">Lorum Ipsum 7</a></li>
        <li><a href="#tabs-8">Lorum Ipsum 8</a></li>
        <li><a href="#tabs-9">Lorum Ipsum 9</a></li>
        <li><a href="#tabs-10">Lorum Ipsum 10</a></li>
        <li><a href="#tabs-11">Lorum Ipsum 11</a></li>
        <li><a href="#tabs-12">Lorum Ipsum 12</a></li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
    <div id="tabs-4">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-5">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-6">
        <p>Content for Tab 3</p>
    </div>
    <div id="tabs-7">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-8">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-9">
        <p>Content for Tab 3</p>
    </div>
    <div id="tabs-10">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-11">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-12">
        <p>Content for Tab 3</p>
    </div>
</div>

CSS

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	line-height: 10px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    margin-bottom: 13px;  /* in firefox: try 13 px and then try 14px */
	padding-bottom: 0px;
}

JavaScript

$("#tabs").tabs();