JS的UL下LI隔行变色划过变色
支持控制多个UL变色
测试ie6/7/FF都通过;CSS和JS完全分离;加了部分注释
测试ie6/7/FF都通过;CSS和JS完全分离;加了部分注释
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.container ul{margin:0;padding:0;}
.container li{cursor:pointer;height:30px;width:200px;background-color:#FFC;line-height:30px; text-indent:1em;font-size:12px;}
.container .change{cursor:pointer;height:30px;width:200px;background-color:#C1F9CC;line-height:30px; text-indent:1em;font-size:12px;}
.container .current{cursor:pointer;height:30px;width:200px;background-color:#F66;line-height:30px; text-indent:1em;font-size:12px;}
</style>
<script type="text/javascript">
window.onload = function() {
changeColor('content');
changeColor('content2');//写上要控制的UL的ID，想控制几个就控制几个
changeColor('content3');
}
function changeColor(id) {
var arrayli = document.getElementById(id).getElementsByTagName('li');
var bool = true; //奇数行为true
var oldStyle; //保存原有样式
for(var i = 0;i<arrayli.length;i++){
//各行变色
if(bool === true){
arrayli[i].className = "change";
bool = false;
}
else {
arrayli[i].className = "";
bool = true;
}
//划过变色
arrayli[i].onmouseover = function() {
oldStyle = this.className;
this.className = "current"
}
arrayli[i].onmouseout = function() {
this.className = oldStyle;
}
}
}
</script>
</head>
<body>
<span>第一个UL</span>
<div class="container">
<ul id="content">
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
</ul>
</div>
<br />
<span>第二个UL</span>
<div class="container">
<ul id="content2">
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
</ul>
</div>
<span>第三个UL</span>
<div class="container">
<ul id="content3">
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.container ul{margin:0;padding:0;}
.container li{cursor:pointer;height:30px;width:200px;background-color:#FFC;line-height:30px; text-indent:1em;font-size:12px;}
.container .change{cursor:pointer;height:30px;width:200px;background-color:#C1F9CC;line-height:30px; text-indent:1em;font-size:12px;}
.container .current{cursor:pointer;height:30px;width:200px;background-color:#F66;line-height:30px; text-indent:1em;font-size:12px;}
</style>
<script type="text/javascript">
window.onload = function() {
changeColor('content');
changeColor('content2');//写上要控制的UL的ID，想控制几个就控制几个
changeColor('content3');
}
function changeColor(id) {
var arrayli = document.getElementById(id).getElementsByTagName('li');
var bool = true; //奇数行为true
var oldStyle; //保存原有样式
for(var i = 0;i<arrayli.length;i++){
//各行变色
if(bool === true){
arrayli[i].className = "change";
bool = false;
}
else {
arrayli[i].className = "";
bool = true;
}
//划过变色
arrayli[i].onmouseover = function() {
oldStyle = this.className;
this.className = "current"
}
arrayli[i].onmouseout = function() {
this.className = oldStyle;
}
}
}
</script>
</head>
<body>
<span>第一个UL</span>
<div class="container">
<ul id="content">
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
</ul>
</div>
<br />
<span>第二个UL</span>
<div class="container">
<ul id="content2">
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
</ul>
</div>
<span>第三个UL</span>
<div class="container">
<ul id="content3">
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
<li>隔行变色，划过变色</li>
</ul>
</div>
</body>
</html>
