繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
应用技巧
→ 正文内容 li隔行换色效果代码升级版
li隔行换色效果代码升级版
发布：dxy 字体：[
增加
减小
] 类型：转载
增加了对同一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 全选 提示:你可先修改部分代码,再按运行]
Tags：
隔行换色
效果
代码
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
不会死机的js 格式代码
下一篇文章：
javascript同步Import,同步调用外部js的方法
·在百度中搜索关于“
li隔行换色效果代码升级版
”相关内容
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
非常不错的三种简洁的Tab导航（网页选项卡
javascript 函数式编程
通过MSXML2自动获取QQ个人头像及在线情况
Javascript - HTML的request类
图片自动缩小的js代码,用以防止图片撑破页
比较简单的一个符合web标准的JS调用flash
在Z-Blog中运行代码[html][/html]（纯JS版
实现div可编辑的常见方法总结
收集的网上用的ajax之chat.js文件
用javascript获取textarea中的光标位置
最 近 更 新
js实现form自动完成功能
用js实现键盘方向键翻页功能的代码
js字符编码函数区别分析
javascript 屏蔽鼠标键盘的几段代码
让iframe自适应高度（支持XHTML，支持FF）
js实现双击单元格变成文本输入框效果代码
document.open() 与 document.write()的区
动态生成的IFRAME，设置SRC时的，不同位置
如何丰富alt属性的显示效果
用xhtml+css写的相册自适应 - 类似九宫格
热 点 排 行
Div+CSS+JS树型菜单，可刷新
在线游戏大家来找茬II
eval(function(p,a,c,k,e,d)系列
javascript小技巧 超强推荐
动态加载js文件 document.create
JavaScript实现Sleep函数的代码
Unicode 编码转换器
彻底搞懂JS无缝滚动代码
支持IE和FF的div＋css选项卡
由浅到深了解JavaScript类
文章评论
共有 位脚本之家网友发表了评论我来说两句