Ajax Tabs

This workshop we will be building a tabbed content browser that's Ajax powered. When ever a user clicks a tab the Ajax will communicate with the server and send back the appropriate data for that tab. We will start this workshop off with the XHTML and CSS for the tabbed content browser. We will need 3 main IDs (one for the container, one for the content area and one for the loading status) and 1 class (for the tabs). The first ID #container will hold the tabs as well as the content area, we only give this a width which everything inside can inherit. The following class .tabs is going to style our tabs, most of the styling we have is mostly for looks an important property is the float:left. The float:left makes the tabs so they are on the same horizontally aligned, this can also be done with using display:inline but with a little more tweaking. We also gave it a property of cursor:pointer so when the user mousses over the tab that it has the look and feel of a button. Finally we have the ID #content.

Ajax Tabs demo

Changes to the code below will update the demo above in real time.



July 22, 2007, 11:24 p.m. - Mohsin

Nice enough

Aug. 19, 2007, 8:35 p.m. - Sam Stanley

Seems pretty slow to load the images.

Sept. 3, 2007, 10:35 p.m. - sachin jain

Great script , the only problem i find is the tabs width is not flexible, i have to dynamically generate the tabs and i dont know the width of each tabs ... Any suggestion

Oct. 8, 2007, 10:54 p.m. - eric

dont' support iframe

Nov. 28, 2007, 1:29 p.m. - Andrea

I'll try it on my blog. Great!!

Feb. 25, 2008, 1:09 a.m. - joker

how to set the script to load every tab on page loading? that will make tab switching instant

May 16, 2008, 3:47 p.m. - oyunlar

How can i set every tab with different colors.

June 5, 2008, 9:39 a.m. - AP Mart

Very nice. I wish it will work on my site. Thanks!

June 20, 2008, 1:11 p.m. - No comment

You can set each tab with a different color by CSS

June 24, 2008, 10:08 p.m. - zidan

thanks, good work

Oct. 31, 2008, 11:07 p.m. - Dharmesh

good very nice

March 6, 2009, 11:37 p.m. - pes092

Спасибо очень помогли.

March 10, 2009, 9:03 a.m. - ipsg007

very very nice.. good work done.. thanks ..

April 6, 2009, 10:36 p.m. - jeck

Nice job!

May 14, 2009, 12:22 a.m. - Sageetha

No work in Mozila and Google Chrome

May 16, 2009, 6:20 a.m. - harry

tanks for u tutorial,,very nice

June 27, 2009, 2:54 a.m. - jeet lal patel

i want to download these demo coding.whether is it possible? thanks jeet.mail72@gmail.com

July 14, 2009, 8:05 a.m. - Sumit

Nice ajax tab, thanx for sharing

July 16, 2009, 5:57 a.m. - viconcursos

Nossa incrivel esse exemplo parabens!!

Oct. 14, 2009, 12:09 a.m. - Kishore

This looks cool

Oct. 22, 2009, 6:13 a.m. - Faith

do we need the prototype.js file to make the tab panels work?

Nov. 23, 2009, 11:18 a.m. - bony

donde encuentro el prototype

April 16, 2010, 9:45 a.m. - üzeyir ÖZKOL

Do jquery in this script? What is the logic work?

April 20, 2010, 8:09 a.m. - nurudeen

nice work i guest but i havn't tried it.

Nov. 17, 2010, 4:41 a.m. - mani

its fantastic

Jan. 27, 2011, 2:30 a.m. - cody campbell

is there any way to make on of the tabs active on load?

May 15, 2012, 4:07 a.m. - Rao

thank you very much for this great info, it helped me in part of my module construction. Thank you.