The example allows you to scroll through content by clicking on tabs, without the page having to reload. The content is already on the page, you just need some javascript to tell it to display. It’s very flexible in what you’re wanting to do with it.

Usage

Attach the following lines in the head of your document.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jtabber.js"></script>
<script type="text/javascript">
 
  $(document).ready(function(){
 
  $.jtabber({
   mainLinkTag: "#nav a", // much like a css selector, you must have a 'title' attribute that links to the div id name
   activeLinkClass: "selected", // class that is applied to the tab once it's clicked
   hiddenContentClass: "hiddencontent", // the class of the content you are hiding until the tab is clicked
   showDefaultTab: 1, // 1 will open the first tab, 2 will open the second etc.  null will open nothing by default
   showErrors: true, // true/false - if you want errors to be alerted to you
   effect: 'slide', // null, 'slide' or 'fade' - do you want your content to fade in or slide in?
   effectSpeed: 'fast' // 'slow', 'medium' or 'fast' - the speed of the effect
  })
 
  })
 
 </script>

Also, include the CSS in the head that is with the example.

Parameters

mainLinkTag: (id or class followed by an anchoring tag) The name of your nav div holding the anchors. In this case we’re using #nav a. This is targetting all the <a> tags inside the div with the id nav (#nav). If you change this you must make sure you have a ‘title’ attribute on your anchor that points to the div that you want to open. You can use ‘ul li’ instead of ‘#nav a’ if you want, you just have to make sure you have a title attribute on your li tag, like this <li title="divname"> Im opening the content with the id of ‘divname’</li>

activeLinkClass: (class name) The class you want to assign the anchor when it’s clicked. The default class is ‘selected’.

hiddenContentClass: (class name) Where the content is (the title attribute div on the anchor). Once the link is clicked, it will show the contents of that div, this should be a class with the style attribute of display:none. This div should also contain the id corresponding to the ‘title’ attribute on your anchor tags so it
knows which content to display.

showDefaultTab: (integer) If you want the first tab to be opened once the page is loaded, leave this at 1. If you want the 2nd tab to be open then change it to 2. If you don’t want any tabs to be open then change it to say null.

showErrors: (true/false) If an error occurs, you’ll probably want to know what it is.

effect: (null, ‘slide’ or ‘fade’) You can have the content appear with an effect, slide in or fade in. If you don’t want an effect and you just want it to be displayed, make this null.

effectSpeed: (‘slow’,'medium’ or ‘fast’) This is the speed you want the effect to run at.

Your HTML should look similar to the code below

<div id="nav">
 <a href="#" title="divname">Merry Christmas</a>
 <a href="#" title="divname2">Joyeux Noel</a>
 <a href="#" title="divname3">Feliz Navidad</a>
 <div class="clear"></div>
</div>
 
<div id="divname" class="hiddencontent"> this is content from the div with the id "divname", we are linking to this by giving the anchor a title attribute with the value of "divname". </div>
<div id="divname2" class="hiddencontent"> this is more content from the div with the id "divname2" </div>
<div id="divname3" class="hiddencontent"> this is more content from the div with the id "divname3" </div>