JS+CSS实现Li列表隔行换色效果的方法

更新时间：2015年02月16日 12:18:29 作者：代码家园

这篇文章主要介绍了JS+CSS实现Li列表隔行换色效果的方法,实例分析了js操作li节点的技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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="https://www.jb51.net/article/61182.htm">

JavaScript实现文字与图片拖拽效果的方法</a></li>

<li>

<a title="jQuery实现点击图片翻页展示效果的方法" target="_blank" href="https://www.jb51.net/article/61181.htm">

jQuery实现点击图片翻页展示效果的方法</a></li>

<li>

<a title="php实现递归与无限分类的方法" target="_blank" href="https://www.jb51.net/article/61180.htm">

php实现递归与无限分类的方法</a></li>

<li>

<a title="php实现多维数组中每个单元值(数字)翻倍的方法" target="_blank" href="https://www.jb51.net/article/61179.htm">

php实现多维数组中每个单元值(数字)翻倍的方法</a></li>

<li>

<a title="php数组添加与删除单元的常用函数实例分析" target="_blank" href="https://www.jb51.net/article/61178.htm">

php数组添加与删除单元的常用函数实例分析</a></li>

<li>

<a title="JS+CSS实现可拖动的弹出提示框" target="_blank" href="https://www.jb51.net/article/61177.htm">

JS+CSS实现可拖动的弹出提示框</a></li>

<li>

<a title="js实现下拉框选择要显示图片的方法" target="_blank" href="https://www.jb51.net/article/61176.htm">

js实现下拉框选择要显示图片的方法</a></li>

<li>

<a title="js实现点击图片将图片地址复制到粘贴板的方法" target="_blank" href="https://www.jb51.net/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程序设计有所帮助。

您可能感兴趣的文章:

div层的移动及性能优化
层的移动本来很简单，用jquery插件或者自己写一个也不难，但是最近一个ipad项目里，发现用手移动div会感觉很卡，体验很差（可能是ipad的配置根不上pc）。
2010-11-11
JavaScript暂时性死区以及函数作用域
这篇文章主要为大家介绍了JavaScript暂时性死区以及函数作用域示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
【经验总结】编写JavaScript代码时应遵循的14条规律
这篇文章主要介绍了编写JavaScript代码时应遵循的14条规律,涉及javascript变量的定义,函数、表单、json的使用,逻辑运算与页面元素操作技巧等,非常具有实用价值,需要的朋友可以参考下
2016-06-06
IScroll5 中文API参数说明和调用方法
IScroll是移动页面上被使用的一款仿系统滚动插件。IScroll5相对于之前的IScroll4改进了许多，使得大家可以更方便的定制所需的功能了。
2016-05-05
详解JSON和JSONP劫持以及解决方法
这篇文章主要介绍了详解JSON和JSONP劫持以及解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
js实现有时间限制消失的图片方法
这篇文章主要介绍了js实现有时间限制消失的图片方法,实例分析了javascript操作setTimeout及图片特效操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
理解 javascript 中的函数表达式与函数声明
这篇文章主要介绍了理解 javascript 中的函数表达式与函数声明,需要的朋友可以参考下
2017-07-07
Vue3中使用typescript封装axios的实例详解
这篇文章主要介绍了使用typescript封装axios的实例代码，为了方便，在vue3的配置里面按需加载element-plus，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2021-10-10
ionic开发中点击input时键盘自动弹出
ionic开发移动端界面时，在输入用户名和密码的时候，输入法不要挡住我的输入框，并且输入框往上滚动的时候，顶部标题不要上移，下面给大家分享实现代码，一起看看吧
2016-12-12
bootstrap模态框关闭后清除模态框的数据方法
今天小编就为大家分享一篇bootstrap模态框关闭后清除模态框的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08