<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
Do *not* reference CSS files and images from flowplayer.org when in
production Enjoy!
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" type="text/css"
href="/media/css/standalone.css"/>
<link rel="stylesheet" href="/media/css/tabs.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="/media/css/tabs-panes.css"
type="text/css" media="screen" />
</head>
<body>
<!-- the tabs -->
<ul class="tabs">
<li><a href="#first">Tab 1</a></li>
<li><a href="#second">Tab 2</a></li>
<li><a href="#third">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>
First pane. <a href="#third">open third tab</a>
</div>
<div>
Second pane. You can open other tabs with normal
<a href="#first">anchor links</a>
</div>
<div>
Third tab content
</div>
</div>
<script>
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});
</script>
</body>
</html>
<!-- Minimal setup for tabs -->
<div class="box" >
<!-- 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>First tab content. Tab contents are called "panes"</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>
</div>
<a class="standalone" href="/demos/tabs/index.htm">standalone demo</a>
<script>
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});
</script>
<!-- AJAXed tabs with history support -->
<div class="box" >
<!-- tabs -->
<ul class="css-tabs">
<li><a href="ajax1.htm">Tab 1</a></li>
<li><a href="ajax2.htm">Second tab</a></li>
<li><a href="ajax3.htm">An ultra long third tab</a></li>
</ul>
<!-- single pane -->
<div class="css-panes">
<div style="display:block"></div>
</div>
<!-- activate tabs with JavaScript -->
<script>
$(function() {
$("ul.css-tabs").tabs("div.css-panes > div",{effect: 'ajax', history: true} );
});
</script>