Easy Tabs for Organizing Your Site
Sometimes it is convenient to have a tabbing layer added into one of the pages of your site. Here is some simple javascript that can be added to quickly give your page this tabbing functionality.
A very basic example is shown below:
To see this on a live web site, you can go to Sun Business Info.
Instructions
Add the following style element into the header area of your html page. (The xiMenuFinal width can be adjusted for the width of the area that is going to receive the tabs)
<style>
.xiMenu { padding-left:0px; }
.xiMenuStart { width:60px;padding-top:1px;border-bottom:solid 1px #000000;float:left}
.xiMenuChoice { width:140px;color:#E72E23;text-align:center;border-style:solid;border-width:1px;border-color: #000000;float:left}
.xiMenuSelected {width:140px;padding-top:1px;text-align:center;border-style:solid solid none solid;border-width:1px;border-color:#000000;float:left}
.xiMenuSpacer {width:3px;padding-top:1px;border-bottom:solid 1px #000000;float:left}
.xiMenuFinal {width:225px;padding-top:1px;border-bottom:solid 1px #000000;float:left}
</style>
A javascript function also has to be added. This will control hiding the regions in the tabs that are not currently selected.
<script type="text/javascript">
function selectXITab(idOn, idOff) {
var domOn = document.getElementById(idOn);
var domOff = document.getElementById(idOff);
domOff.style.display = "none";
domOn.style.display = "block";
}
</script>
for the initially selected tab area, add:
<span id="xi_tab1Selected"> <p class="xiMenu"><span class="xiMenuStart"> </span> <span class="xiMenuSelected"><!--Replace with Displayed Name for Tab 1 (selected) --></span> <span class="xiMenuSpacer"> </span> <span class="xiMenuChoice"><a href="#" onclick="selectXITab('xi_tab2Selected', 'xi_tab1Selected');return false;" style="text-decoration:none"> <!-- Replace with Displayed Name for Tab 2 (unselected) --></a></span> <span class="xiMenuFinal"> </span> <br/></p> <!-- Replace with whatever will appear in the tab --> </span> <!-- End of span for xi_tab1Selected-->
and for any of the initially hidden tab areas add:
<span id="xi_tab2Selected" style="display:none"> <p class="xiMenu"><span class="xiMenuStart"> </span> <span class="xiMenuChoice"><a href="#" onclick="selectXITab('xi_tab1Selected', 'xi_tab2Selected');return false;" style="text-decoration:none"> <!-- Replace with Displayed Name for Tab 1 (unselected) --></a></span> <span class="xiMenuSpacer"> </span> <span class="xiMenuSelected"> <!--Replace with Displayed Name for Tab 2 (selected) --></span> <span class="xiMenuFinal"> </span> <br/></p> <!-- Replace with whatever will appear in the tab --> </span> <!-- End of span for xi_tab2Selected-->
page_revision: 13, last_edited: 1211989897|%e %b %Y, %H:%M %Z (%O ago)
