会员
周边
新闻
博问
闪存
众包
赞助商
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
专注于用户体验
人的一生应该这样度过：当他回首往事的时候，不会因为虚度年华而悔恨，也不会因为碌碌无为而羞愧。
博客园
首页
新随笔
联系
订阅
管理
隔行换色升级版 ... 学无止境
别废话，自个做笔记的。
相对
上一版
，增加了对同一ID内的多个子容器中的tag(标签)分别做隔行处理。
HTML代码
<!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" /> <link rel="shortcut icon" href="http://www.pr1984.com/favicon.ico" /> <title>隔行换色 2 - www.pr1984.com</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,box,tag,s){ if(box==""){//alert("指定当前容器中所有标记"); var line=Pid(id,tag); ghhs_(line,s); } else{//alert("分别指定各子容器中的标记"); var lines=Pid(id,box);//得到子容器的数量 for(var i=0;i<lines.length;i++){//得到各子容器的tag ghhs_(lines[i].getElementsByTagName(tag),s); } } } function ghhs_(line,s) { 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:#fff;} .t2 {background:#eee;} .up {background:#e5e5e5;} div {float:left;width:45%;} ul {padding:30px 0 0;margin:0;} --></style> </head> <body> <div id="a"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div> <script type="text/javascript"><!-- ghhs("a","ul","li") //--></script> <div id="b"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div> <script type="text/javascript"><!-- ghhs("b","","li") //--></script> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
posted @
2008-12-26 13:36
pr.ou
阅读(
221
) 评论(
0
)
收藏
举报
刷新页面
返回顶部
公告
HTML代码
浙公网安备 33010602011771号