Tabs object - a native javascript widget
Using Tabs object in a web page
- In <head> section, add js files class_shim-min.js, tabs-min.js and CSS file tabs.css.
- In <head> section, call the Tabs object, passing the name of the tabs div ('canines') as a parameter.
<head>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script src="class_shim-min.js"><</script>
<script src="tabs-min.js"><</script>
<script>
window.onload = function() { new Tabs('canines'); }
</script>
</head>
- In <body> section, add the tabs control div. The id must match the Tabs() parameter. Also the div must have the class name "tabs".
- Each tab is represented by a ul li a element. Note the href property is ' #' followed by the id.
- Below the tabs, add the tab content. The id of these divs will match the id of the ul li a href property (e.g. coyote, dingo, fox).
<div id="canines" class="tabs">
<ul>
<li><a href="#coyote">Coyote</a></li>
<li><a href="#dingo">Dingo</a></li>
<li><a href="#fox">Fox</a></li>
</ul>
<div id="coyote">
<!-- coyote content -->
</div>
<div id="dingo">
<!-- dingo content -->
</div>
<div id="fox">
<!-- fox content -->
</div>