This library is a simple way to implement tabs on your page using CSS, a little JS, and semantic markup which degrades gracefully on browsers with CSS unavailable or disabled.
Not only is it easy to use and accessible for screen-readers, but it supports multiple (nested, even) tabsets on the same page and allows users to bookmark the page loading to a specific tab.
Here's some sample markup:
<ul class="tabset_tabs">
<li><a href="#tab1" class="active">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1" class="tabset_content">
<h2 class="tabset_label">Tab 1</h2>
Tab 1 Content
</div>
<div id="tab2" class="tabset_content">
<h2 class="tabset_label">Tab 2</h2>
Tab 2 Content
</div>
<div id="tab3" class="tabset_content">
<h2 class="tabset_label">Tab 3</h2>
Tab 3 Content
</div>
It's that easy! (As long as you include the files listed in the Requirements section.)
This library has been tested to work with Safari 1.2, IE 5.5, Mozilla 1.4, Netscape 7, and Firefox 0.8. It works almost perfectly in Mozilla 0.9 and NS6, and degrades gracefully in IE5Mac and Opera. It should work with any modern, standards-compliant browser. (IE5Mac and Opera7 support are possible; read the last bullet in the Notes section.)
In addition to markup as shown in the Overview, you need to include some other files for this to work automagically.
Specifically, you need to copy one CSS file (tabtastic.css), one JS file (tabtastic.js), and three JS library files (AttachEvent.js, AddClassKillClass.js, AddCSS.js).
The head of your HTML page should look something like this:
<script type="text/javascript" src="addclasskillclass.js"></script>
<script type="text/javascript" src="attachevent.js"></script>
<script type="text/javascript" src="addcss.js"></script>
<script type="text/javascript" src="tabtastic.js"></script>For step-by-step instructions, see Step By Step.
Step-by-step instructions for building your own tabset:
<head> of your document:
<script type="text/javascript" src="addclasskillclass.js"></script>
<script type="text/javascript" src="attachevent.js"></script>
<script type="text/javascript" src="addcss.js"></script>
<script type="text/javascript" src="tabtastic.js"></script><ul> with class="tabset_tabs". For each tab, create code like this:
<li><a href="#tabid">Tab Title</a></li>class="active" in the <a> for that tab.<div id="tabid" class="tabset_content">
<h2 class="tabset_label">Tab Title</h2>
...
</div>(The <h2> will not display, but is important for accessibility.)
A few random tips and limitations:
<ul class="tabset_tabs">...</ul>, if you want your tabs to mash up against each other (as they do in this document)..tabset_tabs a { /* A normal tab */ }
.tabset_tabs a:hover { /* A normal tab, when hovered over */ }
.tabset_tabs a.active { /* The selected tab */ }
.tabset_tabs a.preActive { /* The tab to the left of the selected tab */ }
.tabset_tabs a.postActive { /* The tab to the right of the selected tab */ }
.tabset_content { /* The selected tab's contents */ }! important rule to force your styles to take effect.
.tabset_content { height:20em; overflow:auto } and scrollbars will appear as needed!This library uses JS to include the CSS file, so that the content is NOT hidden/inaccessible if the user has JS disabled.
Unfortunately, this breaks IE5Mac and Opera7. If you need support for them (at the expense of users who have CSS supported but JS disabled), comment out AddStyleSheet('tabtastic.css',0) at the end of tabtastic.js, and link in the CSS file yourself.