Copy code code as follows:
<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<TITLE> Tabs Implement IMG Picture Transformation </Title>
<Style Type = "Text/CSS">
#Main {height: 420px; width: 400px;}
#Head {{
width: 400px;
height: 52px;
pose: 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;
pose: absolute;
TOP: 36px;
left: 10px;
}
</style>
</head>
<body>
<div ID = "Main">
<div ID = "Head">
<ul>
<li ID = "tab1" onmouseover = "show (1)" style = "background-color: #fff"> Picture 1 </li>
<li ID = "tab2" onmouseover = "show (2)"> Picture 2 </li>
<li ID = "tab3" onmouseover = "show (3)"> Picture 3 </li>
<li ID = "tab4" onmouseover = "show (4)"> Picture 4 </li>
</ul>
</div>
<div ID = "content">
<p ID = "P1"> <IMG SRC = "Picture 0"/> </p>
<p ID = "p2" style = "display: none;"> <img src = "Picture 1"> </p>
<p ID = "p3" style = "display: none;"> <img src = "picture 2"/> </p>
<p ID = "p4" style = "display: none;"> <img src = "picture 3"/> </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 The control of the hidden content of the content, should be NONE, hidden
}
document.GetelementByid ("tab"+n) .style.BackgroundColor = 'White';
document.GetelementByid ("p"+n) .style.display = 'block';
// When block, the hidden can be displayed
}
</script>
</html>