<!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=utf-8" /> <title>无标题文档</title> </head> <style> .red{color:red;} .blue{color:blue;} #w a{display:block;} .red img{display:block!important;} #w a img{display:none;} </style> <body> <div id="w"> <a class="red" title="1">1<img src="" width="100" height="50" alt="1"></a> <a title="2">2<img src="" width="100" height="50" alt="2"></a> <a title="3">3<img src="" width="100" height="50" alt="3"></a> <a title="4">4<img src="" width="100" height="50" alt="4"></a> </div> <script> window.onload=function(){ var oD=document.getElementById("w"); var oA=oD.getElementsByTagName("a"); var oImg=oD.getElementsByTagName("img"); for(var i=0;i<oA.length;i++){ oA[i].onclick=function(){
//onclick--onmouseover for(var i=0;i<oA.length;i++){ if(this.title==oA[i].title){
//if(this==oA[i])
//this(当前点击)
//oA[i]循环中被选择 this.className="red"; oImg[i].style.display="block"; } else{ oA[i].className="blue"; oImg[i].style.display="none"; } } }; } }; </script> </body> </html>
类似：http://blog.163.com/fan_yishan/blog/static/4769221320141241517368/
思路有些乱，望指教！