Welcome to Virtual Tutorial World Guest!



Tabs in Javascript

 
Post new topic   Reply to topic    VTW Forum Index -> Javascript
View previous topic :: View next topic  
Author Message
Please Register and Login to this forum to stop seeing this advertsing.





Tokens:


Posted:     Post subject:
Back to top
computergeek67
Administrator
Administrator


Joined: 31 Jul 2007
Posts: 144


Tokens: 147
Location: US

PostPosted: Mon Oct 08, 2007 5:21 pm    Post subject: Tabs in Javascript Reply with quote
To 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.


_________________



Come to me if you have any questions
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
Post new topic   Reply to topic    VTW Forum Index -> Javascript All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Card File  Gallery  Forum Archive
Powered by phpBB © 2001, 2005 phpBB Group
Virtual Tutorial World ©2007-2008 computergeek67

Affiliates