li隔行换色改进版

ttx9n · 发表于 2008-5-13 23:39:06

隔行换色非表格版不过原理可以参考下面的代码，写的很不错 ghhs("nav01","li"); // 鼠标经过时变色
ghhs("nav02","li","no"); // 只隔行换色
ghhs("nav03","li","onclick"); // 鼠标点击当前标记变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="keywords" content="PRcss,xhtml,html,css,js,book,个人主页,无聊,神经,懒惰" />  
<meta name="description" content="PRcss的个人主页,无聊的,神经的,懒惰的..." />  
<meta name="Author" content="PRcss,qq:50198763" />  
<meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved" />  
<title>隔行换色 - www.jb51.net 脚本之家</title>  
<script type="text/javascript">  
// 返回Id、Tag  
function Pid(id,tag){  
if(!tag){return document.getElementById(id);}  
else{return document.getElementById(id).getElementsByTagName(tag);}  
}  
// 隔行换色  
function ghhs(id,tag,s) {  
    var line=Pid(id,tag);  
    for (var i=1;i<line.length+1;i++) {   
        line[i-1].className=(i%2>0)?"t1":"t2";   
    }  
    if(s=="no"){  
        return;  
    }  
    else if(!s){  
        for(var i=0;i<line.length;i++) {  
            line[i].onmouseover=function(){  
                this.tmpClass=this.className;  
                this.className+=" up";  
            }  
            line[i].onmouseout=function(){  
                this.className=this.tmpClass;  
            }  
        }  
    }  
    else{  
        for(var i=0;i<line.length;i++) {  
            line[i].tmep=i;  
            line[i][s]=function(){  
                ghhs_tab(this.tmep);  
            }  
        }  
    }  
    function ghhs_tab(s){  
        for(var i=0;i<line.length;i++){  
            if(!line[i].tmpClass){  
                line[i].tmpClass=line[i].className+=" pr1984_com";  
            }  
            if(s==i){  
                line[i].className+=" up";  
            }  
            else {  
                line[i].className=line[i].tmpClass;  
            }  
        }  
    }  
}  
</script>  
<style type="text/css">  
.t1 {background:#eee;}  
.t2 {background:#fff;}  
.up {background:#ddd;}  
</style>  
</head>  
<body>

<ul>  
<li>路过</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>  
</ul>

<ul>  
<li>无视路过</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>  
</ul>

<ul>  
<li>踩我</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>  
</ul>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

jasonlong · 发表于 2023-3-11 16:38:41

为全额万千瓦

qzdhcgs · 发表于 2023-5-3 08:47:21

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

q42obh · 发表于 2023-6-29 14:12:54

你们谁看了弄洒了可能

u7yxn9 · 发表于 2023-9-8 16:53:12

sdsadsadsadf

9jduu05 · 发表于 2023-11-11 22:29:12

1312315458748777

回复用户5 · 发表于 2024-6-16 05:04:27

强烈支持楼主ing……

5ble0ks · 发表于 2024-6-21 10:02:18

天天源码社区。。。。

u6h2m4 · 发表于 2024-7-17 05:45:24

的谁vdvdsvdsvdsdsv

ElbertpholA · 发表于 2024-9-18 12:14:28

论坛有你更精彩！

账号		自动登录	找回密码
密码			立即注册

[JavaScript] li隔行换色改进版

相关帖子