How to create
HTML Tab Container with Java Script....................................
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="tab_container.aspx.cs"
Inherits="tab_container"
%>
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
.style1
{
width: 2%;
height:
51px;
}
</style>
</head>
<body onload ="onloadtab('div1','div2','div3','div4');">
<form id="form1" runat="server"
>
<div>
<table width ="600" cellpadding="0px" cellspacing="0px" style="height:600px;">
<tr>
<td id="div1a"
style="border-left:1px
solid black; border-top:1px solid black; background-color:White; color
:Blue; "
align="center"
class="style1">
<a href ="javascript:void(0)" id="div1b"
style ="text-decoration:none; color :Blue; font-weight: 700;"
onclick="divtab('div1','div2','div3','div4');
"
onmouseover="onmousedivtab('div1');"
onmouseout="onmouseoutdivtab('div1');">Home</a></td>
<td id="div2a"
style="border-top: solid
1px black; background-color:blue; color
:White; "
align="center"
class="style1">
<b>
<a href ="javascript:void(0)"
id="div2b"
style ="text-decoration:none;
color :White;" onclick="divtab('div2','div1','div3','div4');"
onmouseover="onmousedivtab('div2');"
onmouseout="onmouseoutdivtab('div2');">About
Us</a></b></td>
<td id="div3a"
style="border-top: solid
1px black; background-color:blue; color :White; "
align="center"
class="style1">
<a href ="javascript:void(0)"
id="div3b"
style ="text-decoration:none;
color :White; font-weight: 700;"
onclick="divtab('div3','div2','div1','div4');"
onmouseover="onmousedivtab('div3');"
onmouseout="onmouseoutdivtab('div3');">Services</a></td>
<td id="div4a"
style="border-top: solid
1px black; border-right:solid 1px black; background-color:blue; color
:White; "
align="center"
class="style1">
<a href ="javascript:void(0)"
id="div4b"
style ="text-decoration:none; color :White; font-weight: 700;"
onclick="divtab('div4','div2','div3','div1');"
onmouseover="onmousedivtab('div4');"
onmouseout="onmouseoutdivtab('div4');">Contact
Us</a></td>
</tr>
<tr >
<td colspan ="4">
<div id="div1" style="display:block;"><h1>Home</h1>
</div>
<div id="div2" style="display:none;"><h1>About Us</h1>
</div>
<div id="div3" style="display:none;"><h1>Services</h1>
</div>
<div id="div4" style="display:none;"><h1>Contact Us</h1>
</div>
</td></tr>
</table>
</div>
</form>
ß--- javascript function ---Ã
<script type="text/javascript"
language="javascript">
var oldbgcolor1 = "white",
oldtextcolor1 = "Red";
var oldbgcolor2 = "blue",
oldtextcolor2 = "white";
function onloadtab(id1,id2,id3,id4) {
var tab1 = id1 + 'a';
var anch1 = id1 + 'b';
var tab2 = id2 + 'a';
var anch2 = id2 + 'b';
var tab3 = id3 + 'a';
var anch3 = id3 + 'b';
var tab4 = id4 + 'a';
var anch4 = id4 + 'b';
oldbgcolor1
= "Red";
oldtextcolor1 = "White";
oldbgcolor2
= "blue";
oldtextcolor2 = "white";
document.getElementById(tab1).style.background =oldbgcolor1;
document.getElementById(anch1).style.color = oldtextcolor1;
document.getElementById(tab2).style.background = oldbgcolor2;
document.getElementById(anch2).style.color = oldtextcolor2;
document.getElementById(tab3).style.background = oldbgcolor2;
document.getElementById(anch3).style.color = oldtextcolor2;
document.getElementById(tab4).style.background = oldbgcolor2;
document.getElementById(anch4).style.color = oldtextcolor2;
}
function onmouseoutdivtab(id1) {
var tab1 = id1 + 'a';
var anch1 = id1 + 'b';
document.getElementById(tab1).style.background = oldbgcolor1;
document.getElementById(anch1).style.color = oldtextcolor1;
}
function onmousedivtab(id1) {
var tab1 = id1 + 'a';
var anch1 = id1 + 'b';
oldbgcolor1
= document.getElementById(tab1).style.background;
oldtextcolor1 =
document.getElementById(anch1).style.color;
document.getElementById(tab1).style.background = "REd";
document.getElementById(anch1).style.color = "white";
}
function divtab(id1, id2, id3, id4) {
var tab1 = id1 + 'a';
var tab2 = id2 + 'a';
var tab3 = id3 + 'a';
var tab4 = id4 + 'a';
var anch1 = id1 + 'b';
var anch2 = id2 + 'b';
var anch3 = id3 + 'b';
var anch4 = id4 + 'b';
document.getElementById(id1).style.display = "block";
document.getElementById(id2).style.display = "none";
document.getElementById(id3).style.display = "none";
document.getElementById(id4).style.display
= "none";
oldbgcolor1
= "Red";
oldtextcolor1 = "White";
oldbgcolor2
= "blue";
oldtextcolor2 = "white";
document.getElementById(tab1).style.background = oldbgcolor1;
document.getElementById(tab2).style.background = oldbgcolor2;
document.getElementById(tab3).style.background = oldbgcolor2;
document.getElementById(tab4).style.background = oldbgcolor2;
document.getElementById(anch1).style.color
= oldtextcolor1;
document.getElementById(anch2).style.color = oldtextcolor2;
document.getElementById(anch3).style.color = oldtextcolor2;
document.getElementById(anch4).style.color = oldtextcolor2;
}
</script>
</body>
</html>
0 comments:
Post a Comment