关于一个Onclick切换样式的问题

想做个点击

切换图片的功能，现在碰到一个问题，原本设想的效果是点击一个时背景色变为白色字体变为黑色，再次点击另外一个时原先那个再次变为默认颜色（黑色背景白色字体)，但是试了很久都没达到效果。请各位帮忙看看，谢谢。

[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]

你是不是要这个样子的。
window.onload=function setImage(){

  var number=document.getElementById("number");                     
  var list=number.getElementsByTagName("li");                       
  for (var i=0;i<list.length;i++){                                  

          list[i].onclick=function(){     

          var img=document.getElementsByTagName("img");    

          for (var i=0;i<img.length;i++){    
                 //让ul下的li都回复默认样式
                 var listul=number.getElementsByTagName("ul");
                 number.children[i].style.backgroundColor="#FFF";                   
                 number.children[i].style.color="#000"; 
                 var nvalue = this.lastChild.nodeValue;
                 bnvalue  = nvalue.replace(/(\s*)|(\r)|(\n)/g, "");
                 if(img[i].src.indexOf(bnvalue)!=-1){ 
                       img[i].style.display="block";                         
                       var h3=document.getElementsByTagName("h3")[0];   
                       h3.lastChild.nodeValue=img[i].title;  

                   }else{                                               
                       img[i].style.display="none";                     
                   }                                                    

               } 
                //被点击li的样式改变
                 this.style.backgroundColor="#000";                   
               this.style.color="#FFF";
         }

   }    

}

问题找半天找到了，this.lastChild.nodeValue里面有回车或者换行或者空格。
我用 var nvalue = this.lastChild.nodeValue;
bnvalue = nvalue .replace(/(\s*)|(\r)|(\n)/g, "");
不过你的那种比较有点儿危险，比如nvalue的值都在img[i].src中有，这样会把多个图片显示出来的 。

你可以拷过去运行一下，我测试没问题，献丑了 :wink: