li隔行换色改进版- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > li隔行换色改进版

Javascript: 在js中使用"with"语句中跨frame的变量引用问题; 原型方法的不同写法居然会影响调试的解决方法; 在JavaScript中遭遇级联表达式陷阱; JScript内置对象Array中元素的删除方法; 获取JavaScript用户自定义类的类名称的代码; 使用TextRange获取输入框中光标的位置的代码; 使用onbeforeunload属性后的副作用; IE7提供XMLHttpRequest对象为兼容; encode脚本和normal脚本混用的问题与解决方法; 用js判断用户浏览器是否是XP SP2的IE6; 关于使用runtimeStyle属性问题讨论文章; javascript学习随笔(使用window和frame)的技巧; javascript学习随笔(编写浏览器脚本 Navigator Scripting ); 跑马灯效果大全; 让超链接显示提示信息的js代码; 打开超链需要“确认”对话框的方法; javascript的对话框详解与参数; 让网页上的超链接失效，不能点击的js代码; 鼠标经过时链接文字的特别震撼的显示效果; 显示页面的所有链接的js代码

No. « ‹ 53 54 55 56 › »

技术文章搜索

关键字

Javascript 中的 li隔行换色改进版

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 273 ::

收藏到网摘: n/a

li隔行换色效果代码升级版弹出提示的效果代码

隔行换色非表格版不过原理可以参考下面的代码，写的很不错 ghhs("nav01","li"); // 鼠标经过时变色
ghhs("nav02","li","no"); // 只隔行换色
ghhs("nav03","li","onclick"); // 鼠标点击当前标记变色

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="PRcss,xhtml,html,css,js,book,个人主页,无聊,神经,懒惰" />
<meta name="description" content="PRcss的个人主页,无聊的,神经的,懒惰的..." />
<meta name="Author" content="PRcss,qq:50198763" />
<meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved" />
<title>隔行换色 - www.ruanchen.com 软晨学习网</title>
<script type="text/javascript">
// 返回Id、Tag
function Pid(id,tag){
if(!tag){return document.getElementById(id);}
else{return document.getElementById(id).getElementsByTagName(tag);}
}
// 隔行换色
function ghhs(id,tag,s) { var line=Pid(id,tag); for (var i=1;i<line.length+1;i++) { line[i-1].className=(i%2>0)?"t1":"t2"; } if(s=="no"){ return; } else if(!s){ for(var i=0;i<line.length;i++) { line[i].onmouseover=function(){ this.tmpClass=this.className; this.className+=" up"; } line[i].onmouseout=function(){ this.className=this.tmpClass; } } } else{ for(var i=0;i<line.length;i++) { line[i].tmep=i; line[i][s]=function(){ ghhs_tab(this.tmep); } } } function ghhs_tab(s){ for(var i=0;i<line.length;i++){ if(!line[i].tmpClass){ line[i].tmpClass=line[i].className+=" pr1984_com"; } if(s==i){ line[i].className+=" up"; } else { line[i].className=line[i].tmpClass; } } }
}
</script>
<style type="text/css">
.t1 {background:#eee;}
.t2 {background:#fff;}
.up {background:#ddd;}
</style>
</head>
<body>
<div id="nav01">
<ul>
<li>路过</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>
</ul>
</div>
<div id="nav02">
<ul>
<li>无视路过</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>
</ul>
</div>
<div id="nav03">
<ul>
<li>踩我</li><li>asdsad</li><li>asdsad</li><li>asdsad</li>
</ul>
</div>
<script type="text/javascript">
ghhs("nav01","li");
ghhs("nav02","li","no");
ghhs("nav03","li","onclick");
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

li隔行换色效果代码升级版弹出提示的效果代码

Javascript 中的 li隔行换色改进版

评论 (0) All