Here is the HTML of the tab widget. By default, UI tabs use an unordered list with anchor links as the tabs and corresponding div tags with the content. The list starts hidden and will be shown with JavaScript, and each section has a heading that we will hide if JavaScript is enabled.
Code: Select all
<div class="tabs">
<ul class="tabmenu hidden">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>
<div id="tab-1">
<h2>Tab 1</h2>
<p>Content of tab 1</p>
</div>
<div id="tab-2">
<h2>Tab 2</h2>
<p>Content of tab 2</p>
</div>
<div id="tab-3">
<h2>Tab 3</h2>
<p>Content of tab 3</p>
</div>
<div id="tab-4">
<h2>Tab 4</h2>
<p>Content of tab 4</p>
</div>
</div>
Code: Select all
.hidden {
display: none;
}
Code: Select all
$(function() {
$(".tabmenu").removeClass("hidden");
$(".tabs h2").addClass("hidden");
$(".tabs").tabs();
});
Code: Select all
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.hidden {
display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(".tabmenu").removeClass("hidden");
$(".tabs h2").addClass("hidden");
$(".tabs").tabs();
});
</script>
<title>Degradable jQuery UI Tabs</title>
</head>
<body>
<h1>Degradable jQuery UI Tabs</h1>
<div class="tabs">
<ul class="tabmenu hidden">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>
<div id="tab-1">
<h2>Tab 1</h2>
<p>Content of tab 1</p>
</div>
<div id="tab-2">
<h2>Tab 2</h2>
<p>Content of tab 2</p>
</div>
<div id="tab-3">
<h2>Tab 3</h2>
<p>Content of tab 3</p>
</div>
<div id="tab-4">
<h2>Tab 4</h2>
<p>Content of tab 4</p>
</div>
</div>
</body>
</html>