Este artículo describe el método de JS+CSS para implementar el efecto de cambio de color entrelazado de la lista Li. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! 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">
<Evista>
<title> CSS+JS se da cuenta del efecto de cambio de color entrelazado de Li List </title>
</head> <body>
<estilo>
.Mytable {Border-colapse: colapso; borde: sólido #6aa70b; border-width: 0px 0 0 0px; ancho: 50%;}
.MyTable Ul Li {Padding-top: 5px; Text-Indent: 2em; list-style: Ninguno; Antecedentes: URL (/Images/20110704/new_dot.gif) 3px 50% no-Repeat; Border-Bottom:#6AA70B 1PX Dotted; Font-Family: "Verdana, 安体"; font-size:-size:-size: font-size: 12px; color:#008000; text-align: izquierda; altura: 25px;}
.mytable ul li.t1 {de fondo de fondo: #effedd;}
.mytable ul li.t2 {de fondo de fondo: #ffffff;}
.Mytable UL Li.T3 {Color de fondo:#D2FCA0;}
</style>
<Body Style = Margin: 0;> <br> <br> <br>
<div align = "centro">
<div class = mytable id = tab>
<ul>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61182.htm">
Métodos para implementar los efectos de arrastre y caída de texto e imagen en JavaScript </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61181.htm">
Método jQuery para realizar el efecto de visualización de hacer clic en imágenes y realizar páginas </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61180.htm">
Método PHP para implementar la recursión y la clasificación infinita </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61179.htm">
Método PHP para duplicar el valor (número) de cada unidad en una matriz multidimensional </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61178.htm">
Análisis de funciones comunes Ejemplos de suma y eliminación de unidades en matrices de PHP </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61177.htm">
JS+CSS implementa el cuadro de indicación emergente arrastrable </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61176.htm">
JS implementa el método de seleccionar la imagen que se mostrará en el cuadro desplegable </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61175.htm">
JS para darse cuenta de cómo hacer clic en la imagen para copiar la dirección de la imagen a la placa Paste </a> </li>
</ul> </div> <script type = "text/javaScript">
<!-
var ptr = document.getElementById ("tab"). getElementsBytagName ("li");
función $ () {
para (i = 1; i <ptr.length+1; i ++) {
PTR [I-1] .className = (i%2> 0)? "T1": "T2";
}
}
Window.Onload = $;
para (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>
Espero que este artículo sea útil para la programación de JavaScript de todos.