Cet article décrit la méthode de JS + CSS pour implémenter l'effet de changement de couleur entrelacé de la liste Li. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<Title> CSS + JS se rend compte de l'effet de changement de couleur entrelacé de la liste Li </Title>
</ head> <body>
<style>
.Mytable {Border-Collapse: effondrement; bordure: solide # 6AA70B; Border-width: 0px 0 0 0px; largeur: 50%;}
.mytable ul li {padding-top: 5px; text-indent: 2em; list-style: Aucun; fond: url (/images/20110704/new_dot.gif) 3px 50% non-repat; 12px; couleur: # 008000; Text-Align: gauche; hauteur: 25px;}
.mytable ul li.t1 {fond-couleur: #Effedd;}
.mytable ul li.t2 {fond-couleur: #ffffff;}
.mytable ul li.t3 {fond-couleur: # d2fca0;}
</ style>
<style corporel = marge: 0;> <br> <br> <br>
<div align = "Center">
<div class = mytable id = tab>
<ul>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61182.htm">
Méthodes pour implémenter les effets de glissement et de dépôt d'image dans JavaScript </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61181.htm">
Méthode jQuery pour réaliser l'effet d'affichage de cliquer sur les images et les pages de tournage </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61180.htm">
Méthode PHP pour implémenter la récursivité et la classification infinie </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61179.htm">
Méthode PHP pour doubler la valeur (nombre) de chaque unité dans un tableau multidimensionnel </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61178.htm">
Analyse des fonctions communes Exemples d'ajout et de suppression des unités dans des tableaux PHP </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61177.htm">
JS + CSS implémente la boîte d'invite pop-up dragable </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61176.htm">
JS implémente la méthode de sélection de l'image à afficher sur la boîte déroulante </a> </li>
<li>
<a Target = "_ Blank" href = "// www.vevb.com/article/61175.htm">
JS pour réaliser comment cliquer sur l'image pour copier l'adresse d'image à la carte de pâte </a> </li>
</ul> </div> <script type = "text / javascript">
<! -
var ptr = document.getElementById ("tab"). GetElementsByTagName ("li");
fonction $ () {
pour (i = 1; i <ptr.length + 1; i ++) {
Ptr [i-1] .classname = (i% 2> 0)? "T1": "t2";
}
}
window.onload = $;
pour (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;
};
}
// ->
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.