问题描述
想做个点击<li>切换图片的功能，现在碰到一个问题，原本设想的效果是点击一个<li>时背景色变为白色字体变为黑色，再次点击另外一个<li>时原先那个<li>再次变为默认颜色（黑色背景白色字体)，但是试了很久都没达到效果。请各位帮忙看看，谢谢。window.onload=function setImage(){var number=document.getElementById("number");var list=number.getElementsByTagName("li");for (var i=0;i<list.length;i++){list[i].flag=true;list[i].onclick=function(){var img=document.getElementsByTagName("img");for (var i=0;i<img.length;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;}}}}}<style type="text/css">*{margin:0;padding:0;}#wrapper{margin:10px;width:380px;height:230px;}ul#number{position:absolute;left: 288px;top: 160px;}#number li{float:left;margin-right:10px;border:1px solid #FFF;list-style:none;width:20px;height:20px;color:#fff;text-align:center;cursor:pointer;background:#000;color:#FFF;}#numbercolor{background:#FFF;color:#000;}#title{width:380px;height:50px;background:#000;opacity:0.55;filter: alpha(opacity=55);position:absolute;margin-top:180px;z-index: 999;}#wrapper h3{font-size:14px;color:#FFF;position:absolute;margin-top:180px;line-height:50px;width:380px;height:50px;z-index:1000;text-align:center;}</style><div id="wrapper"><ul id="number"><li>1</li> <li>2</li> <li>3</li></ul><h3>[资源] 测试测试测试</h3><div id="title"></div><img src="images/1.jpg" title="[资源] 测试测试测试" /><img src="images/2.jpg" title="[资源] 测试测试测试" style="display:none;"/><img src="images/3.jpg" title="[资源] 测试测试测试" style="display:none;"/></div> 问题补充：andy_javahome 写道
解决方案
你是不是要这个样子的。 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中有，这样会把多个图片显示出来的 。