Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> tab to implement the transform of IMG image </title>
<style type= "Text/css" >
#main {height:420px; width:400px;}
#head {
width:400px;
height:52px;
Position:absolute;
left:10px;
Top: -12px;
Background-color:green;
}
#head li{float:left; list-style:none; width:85px;}
#content {
width:400px;
height:350px;
Background-color: #FC6;
Text-align:center;
Position:absolute;
top:36px;
left:10px;
}
</style>
<body>
<div id= "Main" >
<div id= "Head" >
<ul>
<li id= "Tab1" onmouseover= "Show (1)" style= "Background-color: #FFF" > Picture one </li>
<li id= "TaB2" onmouseover= "Show (2)" > Picture two </li>
<li id= "Tab3" onmouseover= "Show (3)" > Picture three </li>
<li id= "TAB4" onmouseover= "Show (4)" > Picture four </li>
</ul>
</div>
<div id= "Content" >
<p id= "P1" ></p>
<p id= "P2" style= "Display:none;" ></p>
<p id= "P3" style= "display:none;" ></p>
<p id= "P4" style= "Display:none;" ></p>
</div>
</div>
</body>
<script>
function Show (n) {
for (Var i=1;i<=4;i++) {
document.getElementById ("tab" +i). style.backgroundcolor= ' green ';
document.getElementById ("P" +i). style.display= ' None ';
Display to achieve the content of the hidden or not control, when none is, hide
}
document.getElementById ("tab" +n). style.backgroundcolor= ' White ';
document.getElementById ("P" +n). style.display= ' block ';
When block is hidden, it can be displayed.
}
</script>
