繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
应用技巧
→ 正文内容
javascript实现的LI列表输出，隔行同色的代码
发布：dxy 字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head><body> <style> .mytable {border-collapse:collapse;border:solid #6AA70B;border-width:0px 0 0 0px;width:50%;} .mytable ul li {padding-top:5px;text-indent:2em;list-style:none;background:url(http://www.blueidea.com/img/common/new_flash.gif) 3px 50% no-repeat;border-bottom:#6AA70B 1px dotted ;font-family: "Verdana,宋体";font-size: 12px;color:#008000;text-align:left;height:25px;} .mytable ul li.t1 {background-color:#EFFEDD;}/* 第一行的背景色 */ .mytable ul li.t2{background-color:#ffffff;}/* 第二行的背景色 */ .mytable ul li.t3 {background-color:#D2FCA0;}/* 鼠标经过时的背景色 */ </style> <body style=margin:0;> <div align="center"> <div class=mytable id=tab> <ul> <li><a href="#">这个是第1行的文字，大家看清楚了</a></li> <li><a href="#">这个是第2行的文字，大家看清楚了</a></li> <li><a href="#">这个是第3行的文字，大家看清楚了</a></li> <li><a href="#">这个是第4行的文字，大家看清楚了</a></li> <li><a href="#">这个是第5行的文字，大家看清楚了</a></li> <li><a href="#">这个是第6行的文字，大家看清楚了</a></li> <li><a href="#">这个是第7行的文字，大家看清楚了</a></li> <li><a href="#">这个是第8行的文字，大家看清楚了</a></li> <li><a href="#">这个是第9行的文字，大家看清楚了</a></li> </ul></div><script type="text/javascript"> <!-- var Ptr=document.getElementById("tab").getElementsByTagName("li"); function $() { for (i=1;i<Ptr.length+1;i++) { Ptr[i-1].className = (i%2>0)?"t1":"t2"; } } window.onload=$; for(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; }; } //--> </script> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
javascript实现的LI列表输出
隔行同色的代码
百度中搜索更多的关于
javascript实现的LI列表输出，隔行同色的代码
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
javascript最短的拖动代码[兼容FF]
下一篇文章：
JavaScript的9个陷阱及评点分析
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
createElement和onclick
JS处理VBArray的函数使用说明
发布一个高效的JavaScript分析、压缩工具
js eval木马代码,以后再分析吧
CSS代码格式化和压缩的方法与技巧
一个特帅的展示图片的js+css
非常酷的js图形渐隐导航菜单栏
syntaxhighlighter 使用方法
javascript 播放器 控制
如何写一个通用的JavaScript效果库！(2/2
最 近 更 新
js+ajax实现的A*游戏路径算法整理
Prototype 1.5.0_rc1 及 Prototype 1.5.0
JS用 或 || 来兼容FireFox!
【消息提示组件】，兼容IE6/7&&F
JScript中的''var''定义变量的作用域
JavaScript 经典效果集
JS代码格式化和语法着色V2
用javascript实现给出的盒子的序列是否可
用js+xml自动生成表格的东西
li隔行换色效果代码升级版
热 点 排 行
Div+CSS+JS树型菜单，可刷新
在线游戏大家来找茬II
eval(function(p,a,c,k,e,d)系列
javascript小技巧 超强推荐
动态加载js文件 document.create
Unicode 编码转换器
彻底搞懂JS无缝滚动代码
JavaScript实现Sleep函数的代码
支持IE和FF的div＋css选项卡
由浅到深了解JavaScript类
文章评论
共有 位脚本之家网友发表了评论我来说两句