Happy new year. Here you go - wrote you a simple example.
CSS:
#tabs { margin: 0; padding: 0; height: 0; }
#tabs li { float: left; background: #666; list-style: none; padding: 6px 10px; color: #fff; margin-right: 1px; cursor: hand; }
#tabs li:hover { background: #888; }
#tabs li.on, #tabs li.on:hover { background: #f90; color: #fff; cursor: default; }
#tabsUnder { background: #f90; width: 300px; height: 300px; clear: both; padding: 30px; }
JS:
function startAjax() { //appropriate to browser being used
var xmlHttpObj;
if (window.XMLHttpRequest)
xmlHttpObj = new XMLHttpRequest();
else {
try { xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {
try { xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { xmlHttpObj = false; }
}
}
return xmlHttpObj;
}
gateway = startAjax();
function getTabContent(tabNum, afterAjaxResponse) {
if (!afterAjaxResponse) {
if (!gateway) {
alert('Your browser does not support XMLHTTP');
return;
} else {
gateway.open('GET', 'getTabContent.php?tabNum='+tabNum, true);
gateway.onreadystatechange = function() { getTabContent(null, true); }
gateway.send(null);
}
} else if (gateway.readyState == 4 && gateway.status == 200) {
document.getElementById('tabsUnder').innerHTML = gateway.responseText;
}
}
window.onload = function() {
getTabContent(1);
var tabsHouser = document.getElementById('tabs');
var tabs = tabsHouser.getElementsByTagName('li');
tabsHouser.onclick = function(e) {
var clickedElement = e ? e.target : window.event.srcElement;
if (clickedElement.id.match(/^tab\d{1}$/)) {
var clickedTabNum = clickedElement.id.substr(clickedElement.id.length-1, 1);
for(var k=0; k<tabs.length; k++) tabs[k].className = '';
clickedElement.className = 'on';
getTabContent(clickedTabNum);
}
}
}
HTML:
<ul id="tabs">
<li class='on' id='tab1'>tab1</li>
<li id='tab2'>tab2</li>
<li id='tab3'>tab3</li>
<li id='tab4'>tab4</li>
<li id='tab5'>tab5</li>
</ul>
<div id="tabsUnder"></div>
...then to demonstrate the example create a PHP file, in the same folder as the file containing the above, with the following:
switch($_GET['tabNum']) {
case 1: echo "this is the content for the <b>first</b> tab"; break;
case 2: echo "this is the content for the <b>second</b> tab"; break;
case 3: echo "this is the content for the <b>third</b> tab"; break;
case 4: echo "this is the content for the <b>fourth</b> tab"; break;
case 5: echo "this is the content for the <b>fifth</b> tab"; break;
}
Tested: Opera 10.1, FF3, IE8