li与js实现隔行变色的代码实例
发布时间：2014-10-07 编辑：jiaochengji.com
li与js代码相结合实现的隔行换色的例子，有需要的朋友，可以参考下。
代码如下：
<!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="隔行换色" />
<meta name="description" content="隔行换色的例子" />
<title>隔行换色 - www.jbxue.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>脚本学堂</li><li>脚本学堂</li><li>脚本学堂</li>
</ul>
</div>
<div id="nav02">
<ul>
<li>无视路过</li><li>脚本学堂</li><li>脚本学堂</li><li>脚本学堂</li>
</ul>
</div>
<div id="nav03">
<ul>
<li>踩我</li><li>脚本学堂</li><li>脚本学堂</li><li>脚本学堂</li>
</ul>
</div>
<script type="text/javascript">
ghhs("nav01","li"); // 鼠标经过时变色
ghhs("nav02","li","no"); // 只隔行换色
ghhs("nav03","li","onclick"); // 鼠标点击当前标记变色
</script>
</body>
</html>您可能感兴趣的文章：
js 隔行变色的最简单代码
javascript实现隔行变色函数代码一例
JS控制表格隔行变色的实现代码
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
li与js实现隔行变色的代码实例
js 隔行变色与鼠标悬停自动变色的实现代码
js 隔行变色 鼠标经过变色的代码
js实现表格与div隔行变色的代码
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Js表格隔行换色(隔行变色)代码一例
[关闭]