资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
javascript实现的LI列表输出，隔行同色的代码
<!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="#" _ewebeditor_ta_href="%23">这个是第1行的文字，大家看清楚了</a></li> <li><a href="#" _ewebeditor_ta_href="%23">这个是第2行的文字，大家看清楚了</a></li> <li><a href="#" _ewebeditor_ta_href="%23">这个是第3行的文字，大家看清楚了</a></li> <li><a href="#" _ewebeditor_ta_href="%23">这个是第4行的文字，大家看清楚了</a></li> <li><a href="#" _ewebeditor_ta_href="%23">这个是第5行的文字，大家看清楚了</a></li> <li><a href="#" _ewebeditor_ta_href="%23">这个是第6行的文字，大家看清楚了</a></li> <li><a href="#" _ewebeditor_ta_href="%23">这个是第7行的文字，大家看清楚了</a></li> <li><a href="#" _ewebeditor_ta_href="%23">这个是第8行的文字，大家看清楚了</a></li> <li><a href="#" _ewebeditor_ta_href="%23">这个是第9行的文字，大家看清楚了</a></li> </ul></div><img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%20%0D%0Avar%20Ptr%3Ddocument.getElementById(%22tab%22).getElementsByTagName(%22li%22)%3B%20%0D%0Afunction%20%24()%20%7B%20%0D%0A%20%20%20%20%20%20for%20(i%3D1%3Bi%3CPtr.length%2B1%3Bi%2B%2B)%20%7B%20%20%0D%0A%20%20%20%20%20%20Ptr%5Bi-1%5D.className%20%3D%20(i%252%3E0)%3F%22t1%22%3A%22t2%22%3B%20%20%0D%0A%20%20%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Awindow.onload%3D%24%3B%20%0D%0Afor(var%20i%3D0%3Bi%3CPtr.length%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20Ptr%5Bi%5D.onmouseover%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20this.tmpClass%3Dthis.className%3B%20%0D%0A%20%20%20%20%20%20this.className%20%3D%20%22t3%22%3B%20%20%20%20%20%0D%0A%20%20%20%20%20%20%7D%3B%20%0D%0A%20%20%20%20%20%20Ptr%5Bi%5D.onmouseout%3Dfunction()%7B%20%0D%0A%20%20%20%20%20%20this.className%3Dthis.tmpClass%3B%20%0D%0A%20%20%20%20%20%20%7D%3B%20%0D%0A%7D%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程