บทความนี้อธิบายถึงวิธีการของ JS+CSS เพื่อใช้เอฟเฟกต์การเปลี่ยนสีที่เชื่อมระหว่างรายการ LI แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! 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>
<title> CSS+JS ตระหนักถึงเอฟเฟกต์การเปลี่ยนสีที่เชื่อมระหว่างรายการ LI </title>
</head> <body>
<style>
.Mytable {การปิดบังชายแดน: การล่มสลาย; ชายแดน: Solid #6AA70B; Border-Width: 0PX 0 0 0PX; ความกว้าง: 50%;}
.mytable ul li {padding-top: 5px; text-indent: 2em; list-style: none; พื้นหลัง: url (/images/20110704/new_dot.gif) 3px 50% ไม่มีการรีเปท; 12px; สี:#008000; การจัดตำแหน่งข้อความ: ซ้าย; ความสูง: 25px;}
.mytable ul li.t1 {พื้นหลังสี: #effedd;}
.mytable ul li.t2 {พื้นหลังสี: #ffffff;}
.mytable ul li.t3 {พื้นหลังสี:#d2fca0;}
</style>
<body style = margin: 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 ใช้กล่องพรอมต์ป๊อปอัพแบบ draggable </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> </div> <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 ของทุกคน