怎么使用js遍历修改每个元素的class [复制链接]

帖子: 54
体力: 204
威望: 0
居住地: 上海市浦东新区

发表于 2012-5-9 10:50:02 |显示全部楼层

exp：
<ul id="list1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<ul id="list2">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
ID list1和ID list2中hover每一个a都变化不同的class，从而改变背景
有谁写过你，指点下

西部数码云主机4G内存500G仅需423元

使用道具举报

firhome　

飞猪

银牌会员

帖子: 296
体力: 1337
威望: 0
居住地: 上海市长宁区

发表于 2012-5-9 11:12:28 |显示全部楼层

本帖最后由 firhome 于 2012-5-9 11:14 编辑

<!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>js-box</title>
<style type="text/css">
	#mybox {margin:50px auto;font-size:12px;letter-spacing:2px;}
	li {list-style:none;padding:5px 10px;}
	a {color:#666;text-decoration:none;}
	.thissclass {background:#A9D5F4;}
	.hoverclass {background:#e0e0e0;font-weight:bold;}
</style>
</head>
<body>
<div id="mybox">
	<ul>
		<li><a href="###" title="">隔行换色，鼠标移动上来也变化</a></li>
		<li><a href="###" title="">隔行换色，鼠标移动上来也变化</a></li>
		<li><a href="###" title="">隔行换色，鼠标移动上来也变化</a></li>
		<li><a href="###" title="">隔行换色，鼠标移动上来也变化</a></li>
		<li><a href="###" title="">隔行换色，鼠标移动上来也变化</a></li>
		<li><a href="###" title="">隔行换色，鼠标移动上来也变化</a></li>
		<li><a href="###" title="">隔行换色，鼠标移动上来也变化</a></li>
		<li><a href="###" title="">隔行换色，鼠标移动上来也变化</a></li>
		<li><a href="###" title="">隔行换色，鼠标移动上来也变化</a></li>
		<li><a href="###" title="">隔行换色，鼠标移动上来也变化</a></li>
	</ul>
</div>
<script type="text/javascript">
<!--
	window.onload = function (){
		var mybox = document.getElementById("mybox");
		var lis = mybox.getElementsByTagName("li");
		function mouse_out(i) {
				if (i%2 ==0 ){
					lis[i].className = "thissclass"
				}
				else{
					lis[i].className = "";
				}
		}
		for (var i=0;i<lis.length;i++){
			if (i%2 == 0){
				lis[i].className = "thissclass";
			}
			else{
				lis[i].className = "";
			}

lis[i].onmouseover = function(){
				this.className = "hoverclass";
			};

(function (i){
				lis[i].onmouseout=function (){mouse_out(i)}
			})(i);

}
	}

//-->
</script>

</body>
</html>

提示：您可以先修改部分代码再运行

类似的demo很多，自己学习一下吧。

租服务器，上51IDC

使用道具举报