|
|
<!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%;">
<!-- wrap all into one span or div --->
<span style="width:100%;position:relative;border:solid 0px red;top:10px;">
<!-- put tab_body first as bottom --------------->
<span id="tab_body1" class="tab_body" style="display:inline;">
this is tab 1 body<br>
</span> <!-- tab_body1 -->
<span id="tab_body2" class="tab_body" style="display:none;">
this is tab 2 body<br>
this is tab 2 body<br>
</span> <!-- tab_body2 -->
<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> <!-- tab_body3 -->
<!-- put tab_head over tab_body --------------->
<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>
|
|
|
|
Nice post about simple tabs. I like your blog very much because it has very interesting articles of different topics like testking 642-681, testking 642-812 and testking 642-845 and their tips and tricks. I am a very big googler and search on different topics. Between searching i found your nice blog. Thanks for your this great blog.
|
|
|
|
Nice post about simple tabs. I like your blog very much because it has very interesting articles of different topics like testking 642-681, testking 642-812 and testking 642-845 and their tips and tricks. I am a very big googler and search on different topics. Between searching i found your nice blog. Thanks for your this great blog.
|
|
|
|
|
|
|
|
xuwansong
