Dynamic HTML solution
edit
<script language="JavaScript">
window.onload = function() {
activatePage("Pagelet1");
}
function activatePage(sSectionName) {
var nodeElem = document.getElementById("li"+sSectionName);
var nodeList = nodeElem.parentNode.parentNode.childNodes;
for (var i = 0; i < nodeList.length; i++) {
var node = nodeList[i];
if (node.nodeName == "LI") {
node.childNodes[0].className = "";
var nodeDiv =
document.getElementById("div" + node.childNodes[0].id.substr(2));
nodeDiv.style.display = "none";
}
}
document.getElementById("div"+sSectionName).style.display = "";
document.getElementById("li"+sSectionName).className = "active";
document.getElementById("li"+sSectionName).blur();
}
</script>
<style>
UL.tabbar {margin: 0; margin-top: 1em; margin-bottom: 3px; padding: 0;
padding-left: 1em; line-height: 19px;}
UL.tabbar LI {display: inline; white-space: nowrap; }
UL.tabbar A {border: solid 1px silver; background-color: rgb(238,238,238);
padding: 3px 1em 6px 1em; position: relative; z-index: 1;}
UL.tabbar A.active {border-bottom-color: white; background-color: white;}
.pagelet {border: solid 1px silver; padding: 1em;}
</style>
<body>
<ul class='tabbar'>
<li><a href='#divPagelet1' id='liPagelet1'
onclick='activatePage(this.id.substr(2)); return false;'>
Pagelet 1</a></li>
<li><a href='#divPagelet2' id='liPagelet2'
onclick='activatePage(this.id.substr(2)); return false;'>
Pagelet 2</a></li>
</ul>
<div class="pagelet" id="divPagelet1">foo</div>
<div class="pagelet" id="divPagelet2">bar</div>
</body>
