Using Javascript to create simple tabs


	ASP Shopping Cart, Forum & BBS - all for $20 from CodeToad Plus!

Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM

Search Site:

CodeToad Forums » Javascript » Using Javascript to create simple tabs	Search Forums:
This 21 message thread spans 2 pages: [1] 2 > >

Using Javascript to create simple tabs

xuwansong at 17:52 on Wednesday, September 05, 2007

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Wansong's simple tabs using Javascript
</title>
<script type="text/javascript">
//////////////////////////////////////////////////////////
///// Author: Wansong Xu ///////////////
///// Created on: 9/5/07 ///////////////
///// Purpose: create tab using Javascript ///////////////
//////////////////////////////////////////////////////////

var tabs=3;//change this if different number of tabs needed

/// if mouseover tab head, boder bottom gray color will turn to white for in-active tabs
function mouseOverTab(i){
var n=i.substring(i.length-1,i.length);
var tab_body_display=document.getElementById("tab_body"+n).style.display;
if(tab_body_display=="none"){
document.getElementById(i).style.borderBottomColor="white";
}
}

/// if mouseout tab head, boder bottom gray color will remain gray for in-active tabs
function mouseOutTab(i){
var n=i.substring(i.length-1,i.length);
var tab_body_display=document.getElementById("tab_body"+n).style.display;
if(tab_body_display=="none"){
document.getElementById(i).style.borderBottomColor="gray";
}
}

/// if tab is clicked, turn all to default (behind), then turn current to current (front)
function tabClick(i){

var n=i.substring(i.length-1,i.length);
n *=1;
for(var j=1;j<=tabs;j++){
if(n!=j){
document.getElementById("tab_head"+j).style.backgroundColor="lightgrey";
document.getElementById("tab_head"+j).style.borderBottomColor="gray";
document.getElementById("tab_head"+j).style.cursor="hand";
document.getElementById("tab_body"+j).style.display="none";
}else{
document.getElementById("tab_head"+j).style.backgroundColor="white";
document.getElementById("tab_head"+j).style.borderBottomColor="white";
document.getElementById("tab_head"+j).style.cursor="default";
document.getElementById("tab_body"+j).style.display="inline";
}
}

var tabmsg="";

if(n==1){tabmsg="tab1: your will find 1 line";}
if(n==2){tabmsg="tab1: your will find 2 lines";}
if(n==3){tabmsg="tab3: your will find 3 lines";}
document.getElementById("tab_msg").innerHTML=tabmsg;

}

</script>
<style>
.c{background-color:lightgrey;}
body{
font-size:small;
}

/******************************************************************/
/***** 1. Set border with the same for tab head & tab body *******/
/***** 2. Set tab_body top = tab_head height - border width *******/
/***** This is the trick to make span behave like a tab *******/
/***** 3. In design, put tab_head over tab_body *******/
/******************************************************************/

.tab_head{
position:absolute;
cursor:hand;
top:0px;
height:25px;
width:90px;
text-align:center;
border:2px solid gray;
background-color:LightGrey;
}

.tab_body{
display:inline;
padding:5px;
position:absolute;
top:27px;
left:0px;
width:100%;
border-top: 2px solid Gray;
}

</style>
</head>
<body onload="tabClick('tab_head1')">
<form name="form1" id="form1">

<div style=" position:absolute; left:5%; width:90%; height:100%;">


<span style="width:100%;position:relative;border:solid 0px red;top:10px;">


<span id="tab_body1" class="tab_body" style="display:inline;">
this is tab 1 body<br>

</span> 

<span id="tab_body2" class="tab_body" style="display:none;">
this is tab 2 body<br>
this is tab 2 body<br>

</span> 

<span id="tab_body3" class="tab_body" style="display:none;">
this is tab 3 body<br>
this is tab 3 body<br>
this is tab 3 body<br>
</span> 


<span id="tab_head1" class='tab_head'
style="left:10px;border-bottom-color:White;"
onclick="tabClick(this.id);"
onmouseover="mouseOverTab(this.id)"
onmouseout="mouseOutTab(this.id)">
Tab1
</span>

<span id="tab_head2" class='tab_head'
style="left:120px;"
onclick="tabClick(this.id);"
onmouseover="mouseOverTab(this.id)"
onmouseout="mouseOutTab(this.id)">
Tab2
</span>

<span id="tab_head3" class='tab_head'
style="left:230px;"
onclick="tabClick(this.id);"
onmouseover="mouseOverTab(this.id)"
onmouseout="mouseOutTab(this.id)">
Tab3
</span>

<span id="tab_msg" style=" position:absolute; left:500px;top:0px;color:blue;">
</span>

</span>

</div>

</form>
</body>
</html>