تصف هذه المقالة طريقة تنفيذ تأثير تبديل قائمة TAB بواسطة JS+CSS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
INDEX.CSS كما يلي:
انسخ الرمز كما يلي:* {
الهامش: 0px ؛
الحشو: 0px ؛
}
جسم {
العرض: 600 بكسل ؛
الهامش: 0 Auto ؛
خلفية اللون: الفضة.
}
#Contanier {
لون الخلفية: أصفر.
العرض: 600 بكسل ؛ الارتفاع: 400 بكسل ؛
}
#tabnavi {
العرض: 600 بكسل ؛ الارتفاع: 30 بكسل ؛
خلفية اللون: #00BFFF ؛
تدمير النص: لا شيء ؛
نوع القائمة: لا شيء ؛
}
#tabnavi li {
تعويم: اليسار.
يمين الهامش: 7px ؛
خلفية اللون: #008B8B ؛
اللون: أبيض.
المؤشر: مؤشر.
العرض: 60px ؛
الارتفاع: 28 بكسل ؛
ارتفاع الخط: 30 بكسل ؛
محاذاة النص: المركز ؛
}
#محتوى {
العرض: 600 بكسل ؛ الارتفاع: 370 بكسل ؛
خلفية اللون: أبيض.
}
index.html كما يلي:
انسخ الرمز كما يلي: <! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/>
<title> يدرك JS تأثير التبديل الديناميكي لقائمة Tab </title>
<Link Href = "CSS /INDEX.CSS" rel = "STYLESHEET" />
<script type = "text/javaScript">
وظيفة هلام (معرف) {
return document.getElementById (id) ؛
}
var arr = [
{"العنوان": "الأخبار" ، "المحتوى": "هذه قناة إخبارية"} ،
{"title": "Financial" ، "Content": "هذه هي القناة المالية"} ،
{"العنوان": "الترفيه" ، "المحتوى": "هذه قناة ترفيهية"} ،
{"title": "Sports" ، "Content": "هذه قناة رياضية"} ،
{"title": "Car" ، "Content": "This is the Car Channel"} ،
{"العنوان": "فيديو" ، "محتوى": "هذه قناة فيديو"} ،
{"العنوان": "الحياة" ، "المحتوى": "هذه قناة حياة"}
] ؛
window.onload = function () {
لـ (var i = 0 ؛ i <arr.length ؛ i ++) {
var linew = document.createElement ("li") ؛
linew.innerhtml = arr [i] .title ؛
هلام ("tabnavi"). appendChild (linew) ؛
.
linew.setattribute ("id" ، i) ؛
linew.onclick = function () {
var navs = gel ("tabnavi").
// مسح كل الألوان
لـ (var j = 0 ؛ j <navs.length ؛ j ++) {
if (navs [j] .nodeType == 1) {
Navs [j] .style.backgroundColor = "#008B8B" ؛
}
}
this.style.backgroundColor = "Red" ؛
هلام ("المحتوى"). innerhtml = arr [this.id] .Content ؛
} ؛
}
} ؛
</script>
</head>
<body>
<div id = "contanier">
<ul id = "tabnavi"> </ul>
<div id = "content"> </viv>
</div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.