zudolab jqTabContents

Simple usage

You can choose img or text as the tab switch.
This explanation is about text.
Refer the "Text tab example" of the demo.

1. Load "CSSLoader.js", jQuery and "jqTabContents.js"

2. Prepare the (X)html for tab contents.
   Following code is the example.
   

   <ul id="tabNav1">
       <li><a href="#content1" class="showThis">Tab1</a></li>
       <li><a href="#content2">Tab2</a></li>
       <li><a href="#content3">Tab3</a></li>
   </ul>
   <div class="tabContentsGroup">
       <div class="content" id="content1">
           <h3>Tab1 title</h3>
           <p>Tab1 content here. Tab1 content here.</p>
       </div>
       <div class="content" id="content2">
           <h3>Tab2 title</h3>
           <p>Tab2 content here. Tab2 content here.</p>
       </div>
       <div class="content" id="content3">
           <h3>Tab3 title</h3>
           <p>Tab3 content here. Tab3 content here.</p>
       </div>
   </div>

   Anchors in #tabNav1 are the switches to change active tab content.
   Each anchors need to have the target tab content container's ID on its href value.
   The 1st active content's anchor must have the class attribute "showThis".
   

   When the user clicks the anchores in the #tabNav1, only associated content(#content1 or #content2 or #content3) will be displayed and the others will be hided.
   Please see the demo to imagine this.
   You may notice that tab titles <h3>Tab1 title</h3> are not displayed in the demo page.
   I will explain it later. This is for accessibility.

3. Prepare the prehide styles in "forjs.css".
   You need to hide all "div.content" first.
   Only active content will be displayed after the document was loaded.

   div.content{
       display:none;
   }

   Hide h3 too.
   This h3 is for the users who can't use JavaScript.

   h3{
       display:none;
   }

   "forjs.css" will be loaded in "CSSLoader.js".
   Please compare normal demo with JavaScript off demo.
   The JavaScript off users can't load "forjs.css".
   So, they can see h3 and all contents.
   Anchors in #tabNav1 are just the link to each content for them.
   

4. Add the following JavaScript code.
   You need to specify the anchor elements' selector here.

   new TabContents("#tabNav1 a");

   This will associate anchors with each content specified as the href value of the anchors.
   

5. The class attribute of the anchors will be changed dynamically.
   Class "showThis" will be removed after the document was loaded.
   Class "on" will be added to active tab's anchor element.
   Class "on" will be removed when the tab content was disabled.

Img tab

You can use the imgs for tab switch easily.

1. Prepare tab imgs for tab switch.
   Put the active/normal imgs like following example.
   Each imgs will be associated with its name.

   • /off/ (normal imgs)
     • 1.gif
     • 2.gif
     • 3.gif
   • /active/ (active imgs)
     • 1.gif
     • 2.gif
     • 3.gif

2. Replace the texts to img elements in the example above.
   Each img must have the normal(off) img's path as its src value.

   <!-- tabNav2 -->
   <ul id="tabNav2">
       <li><a href="#content1" class="showThis"><img src="./imgs/off/1.gif" alt="Tab1" /></a></li>
       <li><a href="#content2"><img src="./imgs/off/2.gif" alt="Tab2" /></a></li>
       <li><a href="#content3"><img src="./imgs/off/3.gif" alt="Tab3" /></a></li>
   </ul>
   <!-- /tabNav2 -->

3. The tab imgs' src will be switched when the active tab was changed.
   Class "on" will be added or removed too.

   This feature will be enabled if the img contains "/off/" string in its src.
   Imgs which don't contain "/off/" in its src will be ignored.