Coding Cookbook/Tabbar

Dynamic HTML solution

<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>
Last modified on 22 March 2006, at 11:33
Coding Cookbook/Tabbar

Dynamic HTML solution

Wikibooks ™
