jTabber for jQuery February 19, 2008 60 Comments
Last updated: Feb 24, 2008
NOTE: I strongly recommend using a more up-to-date tab plugin like the one maintained by the jQuery UI team. You can find it at http://jqueryui.com/demos/tabs/
The script requires the latest version of jQuery (included 1.2).
Attach the following lines in the head of your document.
Also, include the CSS in the head that is with the example.
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>