Full version: jsB@nk » Menu » Navigation » gilTab
URL: https://www.javascriptbank.com/giltab.html
Create tabs for navigation, definitions, and many other uses. Very effective.
Full version: jsB@nk » Menu » Navigation » gilTab
URL: https://www.javascriptbank.com/giltab.html
<style type="text/css"><!--td.gilTab_taboff { background-color: #000098; color: #fff; height: 20px; font-size: 8pt; font-family: Arial;}td.gilTab_tabon { background-color: #ffd038; color: #000; height: 20px; font-size: 8pt; font-family: Arial;}td.gilTab_tabmouseover { background-color: #fff; color: #000098; height: 20px; font-size: 8pt; font-family: Arial;}--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript"><!--// Created by: Marco Antonio Gil :: marcogil@thyssenkruppelevadores.com.brvar vgilTab_initTab = 1;var vgilTab_tabid = new Array();function gilTab() { var vgilTab_args = arguments.length; if(vgilTab_args < 1) return false; if((vgilTab_args / 2).toString().indexOf('.') > -1) return false; var vgilTab_i; document.write('<table class="gilTab" cellspacing="0" cellpadding="5" width="100%">'); document.write(' <tr>'); for(vgilTab_i=-2;(vgilTab_i+2)<vgilTab_args;vgilTab_i+=2) { vgilTab_tabid[vgilTab_tabid.length] = arguments[(vgilTab_i+2)]; document.write(' <td width="25%" align="center" ' + (((((vgilTab_i+2)/2)+1)==vgilTab_initTab) ? 'class="gilTab_tabon"' : 'class="gilTab_taboff"') + ' onmouseover="fgilTab_mouseover(' + (((vgilTab_i+2)/2)+1) + ')" onmouseout="fgilTab_mouseout(' + (((vgilTab_i+2)/2)+1) + ')" onclick="fgilTab_click(' + (((vgilTab_i+2)/2)+1) + ')" id="gilTab_tab' + (((vgilTab_i+2)/2)+1) + '"><h3>' + arguments[(vgilTab_i+2+1)]+"</h3>"); } document.write(' <tr>'); document.write(' <td align="left" valign="top" class="gilTab_content" colspan="' + ((vgilTab_args / 2)+1) + '">'); document.write(' <div id="gilTab_content">'); document.write(' tab\'s content'); document.write(' </div>'); document.write('</table>'); for(vgilTab_i=-2;(vgilTab_i+2)<vgilTab_args;vgilTab_i+=2) { if((((vgilTab_i+2)/2)+1)==vgilTab_initTab) { try { document.getElementById('gilTab_content').innerHTML=document.getElementById(arguments[(vgilTab_i+2)]).innerHTML; break; } catch(vgilTab_err) { } } }}function fgilTab_click(vgilTab_tabnumber) { if(vgilTab_tabnumber==vgilTab_initTab) return false; var vgilTab_on; var vgilTab_off; try { if(document.getElementById(vgilTab_tabid[vgilTab_tabnumber-1])) { fgilTab_mouseout(vgilTab_tabnumber); vgilTab_on = document.getElementById('gilTab_tab'+vgilTab_tabnumber); vgilTab_off = document.getElementById('gilTab_tab'+vgilTab_initTab); vgilTab_on.className = 'gilTab_tabon'; vgilTab_off.className = 'gilTab_taboff'; document.getElementById(vgilTab_tabid[vgilTab_initTab-1]).innerHTML=document.getElementById('gilTab_content').innerHTML; document.getElementById('gilTab_content').innerHTML=document.getElementById(vgilTab_tabid[vgilTab_tabnumber-1]).innerHTML; vgilTab_initTab = vgilTab_tabnumber; } } catch(vgilTab_err) { }}function fgilTab_mouseover(vgilTab_tabnumber) { if(vgilTab_tabnumber==vgilTab_initTab) return false; var vgilTab_mouseover; try { vgilTab_mouseover = document.getElementById('gilTab_tab'+vgilTab_tabnumber); vgilTab_mouseover.style.cursor='hand'; vgilTab_mouseover.className='gilTab_tabmouseover'; } catch(vgilTab_err) { }}function fgilTab_mouseout(vgilTab_tabnumber) { if(vgilTab_tabnumber==vgilTab_initTab) return false; var vgilTab_mouseout; try { vgilTab_mouseout = document.getElementById('gilTab_tab'+vgilTab_tabnumber); vgilTab_mouseout.style.cursor='auto'; vgilTab_mouseout.className='gilTab_taboff'; } catch(vgilTab_err) { }}--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><!-- /* Tab #1 Content */ --><div id="tab1" style="display:none"> <table width="100%"> <tr> <td>JavaScript tutorial for beginners: <a href="http://www.webreference.com/programming/javascript/diaries/" title="The JavaScript Diaries">The JavaScript Diaries</a></td> </tr> </table></div><!-- /* Tab #2 Content */ --><div id="tab2" style="display:none"> <table width="100%"> <tr> <td>JavaScript is an object-based scripting language. Object-based means that JavaScript sees the existing data structure as objects. A JavaScript object is merely a thing. It's like the objects around us.</td> </tr> </table></div><!-- /* Tab #3 Content */ --><div id="tab3" style="display:none"> <table width="100%"> <tr> <td>JavaScript is cross-platform. The code will run on a wide variety of computer platforms. This means that users with all kinds of computers using different kinds of operating systems are able to obtain the same results as everybody else.</td> </tr> </table></div><!-- /* Tab #4 Content */ --><div id="tab4" style="display:none"> <table width="100%"> <tr> <td>JavaScript comes in different 'flavors': <ul style="margin-top: 1pt"> <li>JavaScript: This was the name given by Netscape, who invented it. It was first used in Netscape 2.0. This is the most popular version of the language and is what we will be learning. The current version is 1.5.</li> <li>JScript: This is the scripting language invented by Microsoft to compete with JavaScript.</li> <li>ECMAScript: The de facto international standard for JavaScript. This standard covers the core of the language.</li> </ul> </td> </tr> </table></div><!-- /* Build All Tabs */ --><table width="50%" align="center"> <tr> <td> <script type="text/javascript"> <!-- Begin vgilTab_initTab = 1; // initialize with tab #1 selected. gilTab('tab1','JavaScript Tutorial','tab2','Object-Based','tab3','Cross-Platform','tab4','Different Flavors') // End --> </script> </td> <tr></table><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->