; ;

Tabtastic v1.0.4 2004-May-21

Table of Contents


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>

<div id="tab1" class="tabset_content">
   <h2 class="tabset_label">Tab 1</h2>
   Tab 1 Content

<div id="tab2" class="tabset_content">
   <h2 class="tabset_label">Tab 2</h2>

   Tab 2 Content

<div id="tab3" class="tabset_content">
   <h2 class="tabset_label">Tab 3</h2>
   Tab 3 Content

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:

  1. Copy the five files listed in the Requirements section to your server.
  2. Assuming the files you copied are in the same directory as the HTML file you're putting the tabs in, put this code in the <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>
  3. Create a <ul> with class="tabset_tabs". For each tab, create code like this:
    <li><a href="#tabid">Tab Title</a></li>
  4. (optional) If you want one tab to start out as the 'active' tab, put class="active" in the <a> for that tab.
  5. For each tab, create content like this:
    <div id="tabid" class="tabset_content">
       <h2 class="tabset_label">Tab Title</h2>

    (The <h2> will not display, but is important for accessibility.)

  6. (optional) Add your own additional custom CSS rules to change the colors which are used. (See Notes.)


A few random tips and limitations:

  • The only bug present in NS6/Mozilla 1.2 (and earlier) is that the selected tab does not overlap the content, causing there to be a black line drawn between the selected tab and the content.
  • There should be no whitespace (other than in tab titles) within your <ul class="tabset_tabs">...</ul>, if you want your tabs to mash up against each other (as they do in this document).
  • The following CSS selectors will give you control over the styling of the content:
    .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              */ }
    Note that you may need to use the ! important rule to force your styles to take effect.
  • Google's translation service does not seem to play nicely with the library; none of the content shows up, only the tabs themselves. For example, see this document translated.
  • It's easy to make the content areas of each tab have scrollbars. Simply add a CSS rule like this .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.

Añadir comentario acerca de esta página:
Tu nombre:
Tu mensaje:


Cuida a la mascota
juega con el

Alimentalo ↑↑↑

Alimentalo ↑↑↑





span style="color: #00ff00">Galeón Profesional

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=
Si desea reportar alguna falla link roto o cualquier cuestio, pongase en contacto con el master. Cяεατεd Bч Fεяя | Cσρчяιgнτ ©2009- τσdσs lσs Dεяεcнσs яεsεяvαdσs.