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


Posted in Javascript onFebruary 16, 2015

本文实例讲述了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://3water.com/article/61182.htm">

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

<li>

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

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

<li>

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

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

<li>

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

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

<li>

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

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

<li>

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

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

<li>

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

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

<li>

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

Javascript 相关文章推荐
Javascript Object.extend
May 18 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 #Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 #Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 #Javascript
js实现下拉框选择要显示图片的方法
Feb 16 #Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 #Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 #Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 #Javascript
You might like
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
js实现随机点名程序
2020/09/17 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Python循环语句之break与continue的用法
2015/10/14 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python hmac模块使用实例解析
2019/12/24 Python
python 动态绘制爱心的示例
2020/09/27 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
直接有效的自我评价
2014/01/11 职场文书
4s店活动策划方案
2014/08/25 职场文书
六年级小学生评语
2014/12/26 职场文书
个人创业事迹材料
2014/12/30 职场文书
休假证明书
2015/06/24 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
Python中的tkinter库简单案例详解
2022/01/22 Python