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.

Download code Visit demo

Tags: tab

<< Prototype window jQuery ThickBox >>

Ajax Tabs demo

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.ajaxdaddy.com/media/demos/play/1/ajax-tabs/ajax-tabs/" />

<center>
<div id="load">Loading...</div>
	<div id="container">
	<div class="tabs" id="tab1">Tab 1</div>
	<div class="tabs" id="tab2">Tab 2</div>
	<div class="tabs" id="tab3">Tab 3</div>
	<div class="tabs" id="tab4">Tab 4</div>
	<div id="content"></div>
</div>
</center>

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.