computergeek67
|
Tabs in JavascriptTo make a table sort of thing with tabs, paste this code here:
| Code: | <table cellpadding=0 cellspacing=0 border=0 height=20 width=560 style="border:1px solid black;border-bottom:0px;border-right:0px;background:#CACACA">
<tr>
<td class=bb id=menu1 onClick="showTb('fTable1','menu1');" style="background:white;border-bottom:0px;">Part I</td>
<td class=bb id=menu2 onClick="showTb('fTable2','menu2');">Part II</td>
<td class=bb id=menu3 onClick="showTb('fTable3','menu3');">Part III</td>
<td class=bb id=menu4 onClick="showTb('fTable4','menu4');">Part IV</td>
<td class=bb id=menu5 onClick="showTb('fTable5','menu5');">Part V</td>
</tr>
</table> |
This is to create the tables and their tabs.
| Code: | body,td{font-family:arial;font-size:12px;}
.bb {
border-right:1px solid black;
text-align:center;
border-bottom:1px solid black;
cursor: hand;
}
//For Bottom tables
.fTb {border:1px solid black; border-top:0px;} |
This is for the style on the table.
| Code: | currentTb = "fTable1";
currTd = "menu1";
function showTb(tbId,tdId){
document.all[tbId].style.display = 'block';
document.all[tbId].style.visibility = 'visible';
document.all[tdId].style.backgroundColor = 'white';
document.all[tdId].style.borderBottom = '0px';
if(currentTb!=""&ĪtTb!=tbId){
document.all[currentTb].style.display = 'none';
document.all[currentTb].style.visibility = 'hidden';
}
if(currTd!=""&&currTd!=tdId){
document.all[currTd].style.backgroundColor = '#CACACA';
document.all[currTd].style.borderBottom = '1px solid black';
}
currentTb=tbId;
currTd = tdId;
} |
And that is the javascript section for the table.
Now for the table content
| Code: | <table id=fTable1 width=560 cellspacing=0 cellpadding=2 border=0 class=fTb style="display:block;visibility:visible;position:relative;">
<tr>
<td class=botBor> <b>this is part one</b><br /><br />This is a javascript table with tabs! <br /></td>
</tr>
</table> |
And now for the second table's content
| Code: | <table id=fTable2 width=560 cellspacing=0 cellpadding=2 border=0 class=fTb style="display:none;visibility:hidden;position:relative;">
<tr>
<td class=botBor> <b>this is part 2</b><br /><br />This is a javascript table with tabs! <br /></td>
</tr>
</table> |
Note: you can to create the other table's content by copy-and-pasting the code and changing the "<table id=fTable2" part. Change the number 2.
|
