Hey.
Creating a simple "tabs" system using AJAX is easy enough. Especially if you use jQuery, or something equivalent.
You could just put the contents of all your tabs in separate HTML files, and use AJAX to load them into a <div> in your HTML.
For example, assuming the following structure:
root/
index.html
tabs.js
styles.css
tabs/
tab1.html
tab2.html
tab3.html
You could simply do:
<!DOCTYPE html>
<html>
<head>
<title>AJAX Tabs Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="Stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="tabs.js"></script>
</head>
<body>
<div id="TabContainer">
<ul id="TabMenu">
<li onclick="SwitchTab('tab1');">Tab 1</li>
<li onclick="SwitchTab('tab2');">Tab 2</li>
<li onclick="SwitchTab('tab3');">Tab 3</li>
</ul>
<div id="TabContents">Loading...</div>
</div>
</body>
</html>
/**
* File: tabs.js
*/
$(document).ready(function()
{
// When the page loads, load the first tab.
SwitchTab('tab1');
});
function SwitchTab(tabName)
{
// Put a Loading message in the TabContents div
$('#TabContents').html('Loading...');
// Create the URL to the tab's HTML page.
var url = 'tabs/' + tabName + ".html";
// Fire of an AJAX query to get the tab HTML
$.get(url, null, function(data){
// Change the contents of the TabContents div to the returned HTML
$('#TabContents').html(data);
}, 'html');
}
And to make it pretty:
(And I use that term very lightly)
/**
* File: styles.css
*/
root {
display: block;
font-size: 1.5em;
font-family: Verdana, Arial, Sans;
}
#TabContainer {
width: 550px;
border: solid 1px #000000;
margin: 15px auto;
}
#TabMenu {
display: block;
height: 25px;
margin: 0;
padding: 0;
background-color: #bfbfbf;
border-bottom: solid 1px #000000;
}
#TabMenu li {
display: block;
float: left;
min-width: 50px;
height: 25px;
padding: 0 3px;
background-color: #dfdfdf;
border-right: solid 1px #333333;
line-height: 25px;
text-decoration: underline;
cursor: pointer;
}
#TabMenu li:hover {
background-color: #efefef;
}
#TabContents {
clear: both;
padding: 5px;
}
Hope that helps.
Unsolved 
