نسخ رمز رمز على النحو التالي:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" /> />
<TITLE> TABS قم بتنفيذ IMG IMG Transformation </title>
<type type = "text/css">
#main {الارتفاع: 420 بكسل ؛
#رأس {{
العرض: 400 بكسل ؛
الارتفاع: 52 بكسل ؛
تشكل: مطلقة ؛
اليسار: 10 بكسل ؛
أعلى: -12 بكسل ؛
خلفية اللون: الأخضر.
}
#Head li {left style ؛
#محتوى {
العرض: 400 بكسل ؛
الارتفاع: 350 بكسل ؛
لون الخلفية:#fc6 ؛
محاذاة النص: المركز ؛
تشكل: مطلقة ؛
أعلى: 36 بكسل ؛
اليسار: 10 بكسل ؛
}
</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)"> الصورة 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>
<script>
وظيفة العرض (n) {
لـ (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' ؛
// عند الكتلة ، يمكن عرض المخفية
}
</script>
</html>