我找到一个,能实现,但我觉得代码似乎有待优化:<html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>debug</title> <style> table,td{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;} body{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;} .picCss{filter:Alpha(Opacity:50)} .textCss{background:highlight;color:#ffffff;display:block;margin-top:5px ;width:60px;text-align: center;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;} .ttt{color:#ff0000;} </style><SCRIPT> j=0; function selectElement() { var el=event.srcElement; var itemFlag=false; var AllElement=document.body.getElementsByTagName('span');
for (var i=0;i<AllElement.length;i++){ if (el.parentElement==AllElement(i)){ itemFlag=true; if (j!=0) AllElement[(j+1)].className='';AllElement[(j+1)].parentElement.children[0].className=''; if (el.tagName=='IMG') el.className='picCss';el.parentElement.children[1].className='textCss'; if (el.tagName=='SPAN') el.className='textCss';el.parentElement.children[0].className='picCss'; j=i; } if (itemFlag==false){ AllElement[i].className=''; AllElement[i].parentElement.children[0].className=''; } }
你这个点哪都会调用那个函数
但不是你说的这个点空白处
而是点任何地方都一样
也就是说点第一次的时候为改变 IMG 及 小SPAN 标签的 CSS 样式
点第二次时恢复,点第三次时改变 IMG 及 小SPAN 标签的 CSS 样式,第四次时恢复
如此循环
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>debug </title>
<style>
table,td{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;}
body{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;} .picCss{filter:Alpha(Opacity:50)}
.textCss{background:highlight;color:#ffffff;display:block;margin-top:5px ;width:60px;text-align: center;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;} .templet{display:block;margin-top:5px ;width:60px;text-align: center;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;}
</style>
<script language="JavaScript">
function css(obj)
{
for(var i=0;i<obj.childNodes.length;i++)
{
if(obj.childNodes[i].tagName)
{
if(obj.childNodes[i].tagName.toUpperCase()=="IMG")
obj.childNodes[i].className =obj.childNodes[i].className=="picCss"?"":"picCss"
else if(obj.childNodes[i].tagName.toUpperCase()=="SPAN")
obj.childNodes[i].className =obj.childNodes[i].className=="textCss"?"templet":"textCss"
}
}
}
</script>
</head> <body><span style="width:62px;height:75px;text-align:center;width: 60px;" onfocus="css(this)" onblur="css(this)"> <img src="images/templetFolder.gif" width="32" height="32"> <span class="templet">四川 </span> </span> <span style="width:62px;height:75px;text-align:center;width: 60px;" onfocus="css(this)" onblur="css(this)"> <img src="images/templetFolder.gif" width="32" height="32"> <span class="templet">休闲 </span> </span> <span style="width:62px;height:75px;text-align:center;width: 60px;" onfocus="css(this)" onblur="css(this)"> <img src="images/templetNode.gif" width="32" height="32"> <span class="templet">中心 </span> </span> <span style="width:62px;height:75px;text-align:center;width: 60px;" onfocus="css(this)" onblur="css(this)"> <img src="images/templetNode.gif" width="32" height="32"> <span class="templet">国家 </span> </span> </body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>debug</title>
<style>
table,td{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;}
body{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;} .picCss{filter:Alpha(Opacity:50)}
.textCss{background:highlight;color:#ffffff;display:block;margin-top:5px ;width:60px;text-align: center;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;}
.ttt{color:#ff0000;}
</style><SCRIPT>
j=0;
function selectElement()
{
var el=event.srcElement;
var itemFlag=false;
var AllElement=document.body.getElementsByTagName('span');
for (var i=0;i<AllElement.length;i++){
if (el.parentElement==AllElement(i)){
itemFlag=true;
if (j!=0) AllElement[(j+1)].className='';AllElement[(j+1)].parentElement.children[0].className='';
if (el.tagName=='IMG') el.className='picCss';el.parentElement.children[1].className='textCss';
if (el.tagName=='SPAN') el.className='textCss';el.parentElement.children[0].className='picCss';
j=i;
}
if (itemFlag==false){
AllElement[i].className='';
AllElement[i].parentElement.children[0].className='';
}
}
}</SCRIPT>
</head><body onclick="selectElement();"><span style="width:62px;height:75px;text-align:center;width: 60px;"> <img src="images/templetFolder.gif" width="32" height="32"> <span style="display:block;margin-top:5px ;width:60px;text-align: center;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;">四川 </span> </span> <span style="width:62px;height:75px;text-align:center;width: 60px;"> <img src="images/templetFolder.gif" width="32" height="32"> <span style="display:block;margin-top:5px ;width:60px;text-align: center;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;">休闲 </span> </span> <span style="width:62px;height:75px;text-align:center;width: 60px;"> <img src="images/templetNode.gif" width="32" height="32"> <span style="display:block;margin-top:5px ;width:60px;text-align: center;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;">中心 </span> </span> <span style="width:62px;height:75px;text-align:center;width: 60px;"> <img src="images/templetNode.gif" width="32" height="32"> <span style="display:block;margin-top:5px ;width:60px;text-align: center;overflow: hidden;white-space:nowrap;text-overflow:ellipsis;">国家 </span> </span> </body></html>
不信可以试试比如你还有别的元素div或者table你点这些一样触发