JavaScript tab interface with persistent tabs


Now with yummy cookies!

I added an example page showing how you can use the new onLoad and onClick function hooks in my JavaScript tabifier to make the tabs persistent (using browser cookies).

That is, if you leave the page and come back later, the tab you previously selected will still be selected.

12 Responses to “JavaScript tab interface with persistent tabs”

  1. Sai says:

    I have tried a lot of sample code for javascript tabs. This is the best.


  2. JerryGP says:

    Hello all:

    I think this is the best tabber, what i like the most is that is very simple, moreover, it is light weight over any page, i recommend this tabber the most.

  3. Greg says:

    Hi there,

    I love this piece of code! Very useful. Now if I can only figure out how to get those tabs to run verticaly down the right side. :)

  4. Greg says:

    Just wanted you to know that I figured out how to position and style the tabs wherever I wanted on the webpage without affecting the content’s position using css. It took quite a bit of time and your nice neat css file is a little messier (ok… alot) :) , but it works! Once again thanks for a great peice of code.

  5. roarus says:

    Awesome code, really easy to use. Got it to work with persistent tabs by just plugging in the codes from the sample!

  6. Mac says:

    Beautiful code. I am very impressed.

  7. Axonman says:

    First – the tabber is a truly awesome piece of programming, and I truly appreciate it.
    Second – I am also interested in the vertical arrangement of the tabs – how does that get done.
    Lastly – is there anyway to incorporate tabber into a series of webpages that already use the onload for other functions – that is without editing each one individually?

  8. Thabo says:

    Hi.. I’m trying to use these tabs to load separate but related pages.

    The problem is, the tabs put all the pages on to one page.
    how can I overcome that?.

    If it can load the code of one page per tab, i’ll be glad

  9. Vicc says:


    I’m searching about one tab system for my web page and I found your and is almost perfect.

    Imagine, I has 3 tabs, each tab has one if I click on submit button the tabs go to default focus.

    So, are easy change the code in your tab system to work like if I click one tab “Features” he change the url to index.html#features, if I change to “Step 1″ he change the url to index.html#step1.

    Why I ask that. Like before I say, I want put some inside the tabs, if I submit something i don’t want loose the tab focus, understand?

    Can some one help me on that?

    Thanks for your code.


  10. Greg Jewett says:

    Can you elaborate how how to combined the Ajax loading of the pages along with the persistence cookies? They use the same “onClick” and “onLoad” object events, but I am not sure how to merge them.

    Any help would be greatly appreciated.

  11. audry says:

    I love your tabs code. I’m implementing them, but i ran into some trouble, I wanted to load the default tab dinamically and tried what you mention, setting the var optionTabs to manual before loading tabber.js; but when i do this, my tabs dont show in my browser. I cant figure out a way to make it dynamic.

    Any help???

  12. Michal says:

    For vertical use: position the ul abolsute, give the tabber div positon relative and you can position the links how you want. Give the li a display:blockl

    And a question for the creater of this script: could you add some effects maybe with combiniation of jquery? i would like the content to slide…. would this be posible?

Leave a Reply