Page 2 of 2

Posted: Fri Nov 03, 2006 11:42 am
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.

Posted: Sat Jun 16, 2007 1:55 pm
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??

Posted: Sat Jun 16, 2007 4:24 pm
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

Posted: Sat Jun 16, 2007 4:32 pm
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:

Posted: Sat Jun 16, 2007 5:39 pm
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.

Posted: Sat Jun 16, 2007 6:18 pm
by Luke
:) thanks