想做个点击
切换图片的功能,现在碰到一个问题,原本设想的效果是点击一个时背景色变为白色字体变为黑色,再次点击另外一个时原先那个再次变为默认颜色(黑色背景白色字体),但是试了很久都没达到效果。请各位帮忙看看,谢谢。[code="javascript"]window.onload=function setImage(){
var number=document.getElementById("number");
var list=number.getElementsByTagName("li");
for (var i=0;i
list[i].flag=true;
list[i].onclick=function(){
var img=document.getElementsByTagName("img");
for (var i=0;i
if(img[i].src.indexOf(this.lastChild.nodeValue)!=-1){
img[i].style.display="";
var h3=document.getElementsByTagName("h3")[0];
h3.lastChild.nodeValue=img[i].title;
}else{
img[i].style.display="none";
}
if(this.flag==true){
this.style.backgroundColor="#000";
this.style.color="#FFF";
this.flag=false;
}
if(this.flag==false){
this.style.backgroundColor="#FFF";
this.style.color="#000";
this.flag=true;
}
}
}
}
}[/code]
[code="css"]<br>
*{<br>
margin:0;<br>
padding:0;<br>
}</p>
<p>#wrapper{<br>
margin:10px;<br>
width:380px;<br>
height:230px;<br>
}</p>
<p>ul#number{<br>
position:absolute;<br>
left: 288px;<br>
top: 160px;<br>
}</p>
<p>#number li{<br>
float:left;<br>
margin-right:10px;<br>
border:1px solid #FFF;<br>
list-style:none;<br>
width:20px;<br>
height:20px;<br>
color:#fff;<br>
text-align:center;<br>
cursor:pointer;<br>
background:#000;<br>
color:#FFF;<br>
}</p>
<p>#numbercolor{<br>
background:#FFF;<br>
color:#000;<br>
}</p>
<p>#title{<br>
width:380px;<br>
height:50px;<br>
background:#000;<br>
opacity:0.55;<br>
filter: alpha(opacity=55);<br>
position:absolute;<br>
margin-top:180px;<br>
z-index: 999;<br>
}</p>
<p>#wrapper h3{<br>
font-size:14px;<br>
color:#FFF;<br>
position:absolute;<br>
margin-top:180px;<br>
line-height:50px;<br>
width:380px;<br>
height:50px;<br>
z-index:1000;<br>
text-align:center;<br>
}<br>
[/code]
[code="html"]
[/code]