这篇文章主要介绍了 JS+CSS 实现 Li 列表隔行换色效果的方法, 实例分析了 js 操作 li 节点的技巧, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JS+CSS 实现 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>
- <title>
- CSS+Js实现Li列表隔行换色效果
- </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(/images/20110704/new_dot.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;>
- <br>
- <br>
- <br>
- <div align="center">
- <div class=mytable id=tab>
- <ul>
- <li>
- <a title="JavaScript实现文字与图片拖拽效果的方法" target="_blank" href="http://www.phperz.com/article/61182.htm">
- JavaScript实现文字与图片拖拽效果的方法
- </a>
- </li>
- <li>
- <a title="jQuery实现点击图片翻页展示效果的方法" target="_blank" href="http://www.phperz.com/article/61181.htm">
- jQuery实现点击图片翻页展示效果的方法
- </a>
- </li>
- <li>
- <a title="php实现递归与无限分类的方法" target="_blank" href="http://www.phperz.com/article/61180.htm">
- php实现递归与无限分类的方法
- </a>
- </li>
- <li>
- <a title="php实现多维数组中每个单元值(数字)翻倍的方法" target="_blank" href="http://www.phperz.com/article/61179.htm">
- php实现多维数组中每个单元值(数字)翻倍的方法
- </a>
- </li>
- <li>
- <a title="php数组添加与删除单元的常用函数实例分析" target="_blank" href="http://www.phperz.com/article/61178.htm">
- php数组添加与删除单元的常用函数实例分析
- </a>
- </li>
- <li>
- <a title="JS+CSS实现可拖动的弹出提示框" target="_blank" href="http://www.phperz.com/article/61177.htm">
- JS+CSS实现可拖动的弹出提示框
- </a>
- </li>
- <li>
- <a title="js实现下拉框选择要显示图片的方法" target="_blank" href="http://www.phperz.com/article/61176.htm">
- js实现下拉框选择要显示图片的方法
- </a>
- </li>
- <li>
- <a title="js实现点击图片将图片地址复制到粘贴板的方法" target="_blank" href="http://www.phperz.com/article/61175.htm">
- js实现点击图片将图片地址复制到粘贴板的方法
- </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>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: