<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li{
list-style:none;width:90px;height:101px;
background:url(img/active.png);flat:left;margin-right:20px;
}
</style>
<script>
if(this.onOff){
this.style.background='url(img/normal.png)';
this.onOff=false
}else{
this.style.background='url(img/active.png)';
this.onOff=true;
}
}
}
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li{
list-style:none;width:90px;height:101px;
background:url(img/active.png);flat:left;margin-right:20px;
}
</style>
<script>
window.onload = function (){
//下面我们要实现这种效果，点击图片，图片切换状态，再次点击图片，图片状态改变回来。
var aLi=document.getElementsByTagName('li');
//所以定义一组开关，以实现效果，但是此时的效果是点击一张图片可以实现效果，当点击一张图片
再次点击第二张图片的时候，没有起作用。所以这样定义属性不行，
//var onOff=true;//只能控制一组for(var i=0;i<aLi.length;i++){
//解决方案就是给每一个li都加上一个自定义属性,就可以实现上述效果
aLi[i].onOff=true;
aLi[i].οnclick=function(){if(this.onOff){
this.style.background='url(img/normal.png)';
this.onOff=false
}else{
this.style.background='url(img/active.png)';
this.onOff=true;
}
}
}
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
