首页 > 网络编程 > JavaScript > javascript技巧 > li隔行换色 li隔行换色效果代码升级版 2008-05-13 23:35:56 作者： 增加了对同一ID内的多个子容器中的tag(标签)分别做隔行处理。div+css布局下，也可以控制了 <!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>隔行换色 2 - 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,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 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:li隔行换色改进版js取模（求余数）隔行变色JS小功能(列表页面隔行变色)简单实现jQuery隔行变色与普通JS写法的对比JS实现简洁(隔行换色、高亮显示)表格特效js隔行变色、鼠标划过变色代码js 表格隔行颜色Js 实现表格隔行换色一例JS控制表格隔行变色JS+CSS实现Li列表隔行换色效果的方法
