다음과 같이 코드 코드를 복사하십시오.
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" /> />
<title> 탭은 IMG 사진 변환 </title>을 구현합니다
<스타일 유형 = "텍스트/CSS">
#메인 {높이 : 420px;}
#머리 {{
너비 : 400px;
높이 : 52px;
포즈 : 절대;
왼쪽 : 10px;
상단 : -12px;
배경색 : 녹색;
}
#Head Li {Float : LEST 스타일;
#콘텐츠 {
너비 : 400px;
높이 : 350px;
배경색 :#fc6;
텍스트 정렬 : 센터;
포즈 : 절대;
상단 : 36px;
왼쪽 : 10px;
}
</스타일>
</head>
<body>
<div id = "main">
<div id = "Head">
<ul>
<li id = "tab1"onmouseover = "show (1)"Style = "Background-Color : #fff"> 그림 1 </li>
<li id = "tab2"onmouseover = "show (2)"> 그림 2 </li>
<li id = "tab3"onmouseover = "show (3)"> 그림 3 </li>
<li id = "tab4"onmouseover = "show (4)"> 그림 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>
<cript>
기능 쇼 (n) {
for (var i = 1; i <= 4; i ++) {
document.getElementById ( "tab"+i) .style.backgroundColor = 'Green';
document.getElementById ( "p"+i) .style.display = 'none';
// 내용의 숨겨진 내용의 제어를 표시하고, 없어야합니다.
}
document.getElementById ( "tab"+n) .style.backgroundColor = 'White';
document.getElementById ( "p"+n) .style.display = 'block';
// 블록이 있으면 숨겨진 것을 표시 할 수 있습니다
}
</스크립트>
</html>