Salin kode kode sebagai berikut:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡实现img图片的变换</title>
<style type="text/css">
#main{ height:420px; width:400px;}
#Kepala {{
width:400px;
height:52px;
position:absolute;
left:10px;
top: -12px;
Latar Belakang: Hijau;
}
#Head li {float: left-style: none;
#Isi {
Lebar: 400px;
Tinggi: 350px;
Latar Belakang-Color:#FC6;
Teks-Align: tengah;
Pose: Absolute;
Atas: 36px;
Kiri: 10px;
}
</tyle>
</head>
<body>
<Div id = "Main">
<Div id = "head">
<ul>
<li id = "tab1" onmouseover = "show (1)" style = "latar belakang-warna: #fff"> gambar 1 </li>
<li id = "tab2" onmouseover = "show (2)"> Gambar 2 </li>
<li id = "tab3" onmouseover = "show (3)"> Gambar 3 </li>
<li id = "tab4" onmouseover = "show (4)"> Gambar 4 </li>
</ul>
</div>
<div id = "konten">
<p id = "p1"> <img src = "picture 0"/> </p>
<p id="p2" style="display:none;"><img src=“图片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) {
untuk (var i = 1; i <= 4; i ++) {
document.geteLementById ("tab"+i) .style.backgroundColor = 'green';
document.geteLementById ("p"+i) .style.display = 'none';
//display实现内容的隐藏与否的控制，当为none是，隐藏
}
document.geteLementById ("tab"+n) .style.backgroundColor = 'white';
document.geteLementById ("p"+n) .style.display = 'block';
// Saat blok, yang tersembunyi dapat ditampilkan
}
</script>
</html>