<!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>
.holder li.current{
background-color:#000000
}
.holder li {
padding: 14px 16px;
float: left;
}
</style>
</head>
<body>
<div class="holder">
<ul><li>aaa</li></ul>
<ul><li>aaa</li></ul>
</div><div class="holder">
<ul><li>bbb</li></ul>
<ul><li>bbb</li></ul>
</div>
<script type="text/javascript">
var holder = document.getElementsByClassName("holder")[0];
var td = holder.getElementsByTagName("li");
for(var i = 0; i < td.length; i++){
var obj = td[i];
obj.onmouseover = function(){this.className = "current";};
obj.onmouseout = function(){this.className = "";};
}
</script> </body>
</html>这是一个鼠标滑过背景变换的效果,现在后面那个不起作用,页面上很多地方都要用同样的效果,谁能帮忙修改一下啊
早上发的一帖,有人帮我把id改成现在这样class的,但是不行,只能对第一个起作用http://topic.csdn.net/u/20120824/11/3d14af22-343c-43d5-b8e4-c2653bc3d68f.html?11245
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.holder li.current{
background-color:#000000
}
.holder li {
padding: 14px 16px;
float: left;
}
</style>
</head>
<body>
<div class="holder">
<ul><li>aaa</li></ul>
<ul><li>aaa</li></ul>
</div><div class="holder">
<ul><li>bbb</li></ul>
<ul><li>bbb</li></ul>
</div>
<script type="text/javascript">
var holder = document.getElementsByClassName("holder")[0];
var td = holder.getElementsByTagName("li");
for(var i = 0; i < td.length; i++){
var obj = td[i];
obj.onmouseover = function(){this.className = "current";};
obj.onmouseout = function(){this.className = "";};
}
</script> </body>
</html>这是一个鼠标滑过背景变换的效果,现在后面那个不起作用,页面上很多地方都要用同样的效果,谁能帮忙修改一下啊
早上发的一帖,有人帮我把id改成现在这样class的,但是不行,只能对第一个起作用http://topic.csdn.net/u/20120824/11/3d14af22-343c-43d5-b8e4-c2653bc3d68f.html?11245
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
author: yanzhen
date: 2012-8-24
content: change the background color when mouse move on it
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<!-- css style -->
<style type="text/css">
ul li:hover
{
background-color:red;
cursor:pointer;
}
</style>
<!-- javascript code-->
<script type="text/javascript">
window.onload = function() {
var lis = document.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover = function() {
this.setAttribute("class", "hover");
}
lis[i].onmouseout = function() {
this.setAttribute("class", "");
}
}
}
</script>
</head>
<body>
<div>
<ul>
<li>bbb</li>
<li>bbb</li>
<li>bbb</li>
<li>bbb</li>
</ul>
</div>
</body>
</html>
那个current好像不管用,不知道楼主怎么做成功的.
document.getElementById
for (var k = 0; k < holder.length; k++) {
if (holder[k].className != 'holder') continue;
var td = holder[k].getElementsByTagName("li");
for (var i = 0; i < td.length; i++) {
var obj = td[i];
obj.onmouseover = function () { this.className = "current"; };
obj.onmouseout = function () { this.className = ""; };
}
}
var holder = document.getElementsByTagName("div");
for (var j = 0; j < holder.length; j++) {
var className = holder.item(j).getAttribute("class");
if (className == "holder") {
var td = holder.item(j).getElementsByTagName("li");
for (var i = 0; i < td.length; i++) {
var obj = td[i];
obj.onmouseover = function () { this.className = "current"; };
obj.onmouseout = function () { this.className = ""; };
}
}
}