Tabs demo 1 / 13 : Minimal setup for Tabs

http://flowplayer.org/tools/demos/tabs/index.html

by cfarm

HTML

<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
<link rel="stylesheet" href="http://static.flowplayer.org/tools/css/standalone.css">
<link rel="stylesheet" href="http://static.flowplayer.org/tools/css/tabs.css">
<!-- 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>
    <li><a href="#">Tab 4</a></li>

</ul>

<!-- tab "panes" -->
<div class="panes">
    <div>First tab content. Tab contents are called "panes"</div>
    <div>Second tab content</div>
    <div>Third tab content</div>
    <div> tab content</div>
</div>

CSS

/* tab pane styling */
.panes div {
    display:none;        
    padding:15px 10px;
    border:1px solid #999;
    border-top:0;
    height:100px;
    font-size:14px;
    background-color:#fff;
}

JavaScript

$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});