Posted: Fri Nov 03, 2006 11:42 am
I have used the following for this kind of thing:
I use prototype, so it might look a little odd if you've not come across it before.
Basically selectTab() is triggered from whatever buttons you want passing the tab number to show as the argument. Trigger it onload to show the first tab, or the URL can have the tab number to show at the end of it: #2, #3, etc.
Each content container should have an id of tab1, tab2, tab3, etc. This way you can have as many or as few tabs as you like and the code doesn't need to change.
Code: Select all
function selectTab(num)
{
if (typeof num != 'number')
{
// Could be passed as #tabNo otherwise the first one
num = (window.location.hash) ? window.location.hash.substr(window.location.hash.indexOf('#') + 1) : 1;
}
var i = 1;
var obj;
while (obj = $('tab'+i))
{
(i == num) ? obj.show() : obj.hide();
i++;
}
}Basically selectTab() is triggered from whatever buttons you want passing the tab number to show as the argument. Trigger it onload to show the first tab, or the URL can have the tab number to show at the end of it: #2, #3, etc.
Each content container should have an id of tab1, tab2, tab3, etc. This way you can have as many or as few tabs as you like and the code doesn't need to change.