Coding Cookbook/Tabbar
Appearance
Dynamic HTML solution
[edit | edit source]<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>