تصف هذه المقالة طريقة JS+CSS لتنفيذ تأثير تغيير اللون المتشابك في قائمة LI. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> CSS+JS يدرك تأثير تغيير اللون المتشابك لقائمة LI </title>
</head> <body>
<style>
.mytable {border-collapse: collapse ؛ الحدود: الصلبة #6AA70B ؛ عرض الحدود: 0px 0 0 0px ؛ العرض: 50 ٪ ؛}
.mytable ul li {padding-top: 5px ؛ text-indent: 2em ؛ style-style: none ؛ الخلفية: url (/emages/20110704/new_dot.gif) 3px 50 ٪ لا تكرار ؛ 12px ؛ اللون:#008000 ؛ محاذاة النص: اليسار ؛ الارتفاع: 25px ؛}
.mytable ul li.t1 {background-color: #effedd ؛}
.mytable ul li.t2 {background-color: #ffffff ؛}
.mytable ul li.t3 {background-color:#d2fca0 ؛}
</style>
<نمط الجسم = الهامش: 0 ؛> <br> <br> <br>
<div align = "center">
<div class = mytable id = tab>
<ul>
<li>
<a target = "_ blank" href = "// www.vevb.com/article/61182.htm">
طرق لتنفيذ تأثيرات النص والصورة السحب وإسقاطها في JavaScript </a> </li>
<li>
<a target = "_ blank" href = "// www.vevb.com/article/61181.htm">
طريقة jQuery لتحقيق تأثير عرض النقر على الصور وتحويل الصفحات </a> </li>
<li>
<a target = "_ blank" href = "// www.vevb.com/article/61180.htm">
طريقة PHP لتنفيذ العودية والتصنيف اللانهائي </a> </li>
<li>
<a target = "_ blank" href = "// www.vevb.com/article/61179.htm">
طريقة PHP لمضاعفة القيمة (الرقم) لكل وحدة في صفيف متعدد الأبعاد </a> </li>
<li>
<a target = "_ blank" href = "// www.vevb.com/article/61178.htm">
تحليل الوظائف الشائعة أمثلة على إضافة وحذف الوحدات في صفائف PHP </a> </li>
<li>
<a target = "_ blank" href = "// www.vevb.com/article/61177.htm">
JS+CSS تنفذ مربع موجه منبثق قابلة للسحب </a> </li>
<li>
<a target = "_ blank" href = "// www.vevb.com/article/61176.htm">
JS ينفذ طريقة تحديد الصورة المراد عرضها على المربع المنسدل </a> </li>
<li>
<a target = "_ blank" href = "// www.vevb.com/article/61175.htm">
JS لإدراك كيفية النقر على الصورة لنسخ عنوان الصورة إلى لوحة اللصق </a> </li>
</ul> </viv> <script type = "text/javaScript">
<!-
var ptr = document.getElementById ("tab"). getElementsByTagName ("li") ؛
وظيفة $ () {
لـ (i = 1 ؛ i <ptr.length+1 ؛ i ++) {
ptr [i-1] .className = (i ٪ 2> 0)؟ "T1": "T2" ؛
}
}
window.onload = $ ؛
لـ (var i = 0 ؛ i <ptr.length ؛ i ++) {
ptr [i] .onmouseover = function () {
this.tmpClass = this.className ؛
this.className = "T3" ؛
} ؛
ptr [i] .onmouseout = function () {
this.className = this.tmpClass ؛
} ؛
}
//->
</script>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.