Tabs with javascript

JavaScript and client side scripting.

Moderator: General Moderators

choppsta
Forum Contributor
Posts: 114
Joined: Thu Jul 03, 2003 11:11 am

Post by choppsta »

I have used the following for this kind of thing:

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++;
	}
}
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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

What I ended up doing was using the tabs plugin for jQuery by Klaus Hartl. It works flawlessly. I love this plugin!

Here's the final product: http://www.bagselect.com/p/OGI003A (to the lower right of the product) Cool, huh??
thiscatis
Forum Contributor
Posts: 434
Joined: Thu Jul 20, 2006 11:00 am

Post by thiscatis »

I'm not a fan of the fade thing, but it works

It looks better in something like this:

http://tweakers.net/

Top right corner; the 1 2 3 box
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

yea I think I might agree. I am considering turning off the fade. I like how you implemented that. I just used the default tabs. :oops:
thiscatis
Forum Contributor
Posts: 434
Joined: Thu Jul 20, 2006 11:00 am

Post by thiscatis »

A thing I noticed: I like the way the menu tabs (on the top of the page) look very similar to the product info tabs. These kind of small things really increase the professional look of the website.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

:) thanks
Post Reply