这是我写的 ,没用JS函数控制 。。
<td id="shcj" width="109" height="24" align="center" valign="bottom" background="/cms/templets/iimages/img_top26.jpg">
<a onmouseover="javascript:shcjdiv.style.display='block';tyyldiv.style.display='none';shcj.background='/cms/templets/iimages/111.jpg';tyyl.background='/cms/templets/iimages/222.jpg';this.style.color='#f56006';" style="font-weight:bold;color: #f56006;font-size: 14px;cursor:pointer;" onMouseOut="this.style.color='#5e522a'">社会·财经</a></td>
<td id="tyyl" width="109" align="center" valign="bottom" background="/cms/templets/iimages/img_top27.jpg">
<a onmouseover="javascript:shcjdiv.style.display='none';tyyldiv.style.display='block';shcj.background='/cms/templets/iimages/222.jpg';tyyl.background='/cms/templets/iimages/111.jpg';this.style.color='#f56006';" style="font-weight:bold;color: #5e522a;font-size: 14px;cursor:pointer;" onMouseOut="this.style.color='#5e522a'">体育·娱乐</a></td>
<div id="shcjdiv">
aaaaaaaaaaaaaa
</div>
<div id="shcjdiv">
bbbbbbbbbbbbbb
</div>现在有两个问题,代码感觉不规范,不知道是不是所有浏览器都支持。。
还有个问题就是鼠标移走之后,两个标签的颜色没有恢复 。
<td id="shcj" width="109" height="24" align="center" valign="bottom" background="/cms/templets/iimages/img_top26.jpg">
<a onmouseover="javascript:shcjdiv.style.display='block';tyyldiv.style.display='none';shcj.background='/cms/templets/iimages/111.jpg';tyyl.background='/cms/templets/iimages/222.jpg';this.style.color='#f56006';" style="font-weight:bold;color: #f56006;font-size: 14px;cursor:pointer;" onMouseOut="this.style.color='#5e522a'">社会·财经</a></td>
<td id="tyyl" width="109" align="center" valign="bottom" background="/cms/templets/iimages/img_top27.jpg">
<a onmouseover="javascript:shcjdiv.style.display='none';tyyldiv.style.display='block';shcj.background='/cms/templets/iimages/222.jpg';tyyl.background='/cms/templets/iimages/111.jpg';this.style.color='#f56006';" style="font-weight:bold;color: #5e522a;font-size: 14px;cursor:pointer;" onMouseOut="this.style.color='#5e522a'">体育·娱乐</a></td>
<div id="shcjdiv">
aaaaaaaaaaaaaa
</div>
<div id="shcjdiv">
bbbbbbbbbbbbbb
</div>现在有两个问题,代码感觉不规范,不知道是不是所有浏览器都支持。。
还有个问题就是鼠标移走之后,两个标签的颜色没有恢复 。
我本来就是用CSS控制的啊 /。。
a.demo{background:#F0EBD6;padding:8px;width:240px;text-decoration:none;color:#000000;}
a.demo:hover{background:#FFC080;color:#ffffff;}
a.demo:active{background:#CCCFFF;color:#aaaaaa;}
a.demo:visited{background:#FF3300;color:#555555;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style><table>
<tr><td>
<a class=demo href="none.html" onclick="return false;">
aaaaaaaaa
</a>
</td></tr>
<tr><td>
<a class=demo href="none.html" onclick="return false;">
bbbbbbb
</a>
</td></tr>
<tr><td>
<a class=demo href="none.html" onclick="return false;">
cccccc
</a>
</td></tr>
</table>
<a id='tyyl' onmouseover="javascript:shcjdiv.style.display='none';tyyldiv.style.display='block';shcj.background='/open.gif';tyyl.background='/closed.gif';this.style.color='#f56006';" style="font-weight:bold;color: #5e522a;font-size: 14px;cursor:pointer;" onMouseOut="this.style.color='#5e522a'">体育·娱乐 </a>
<div id="shcjdiv">
aaaaaaaaaaaaaa
</div>
<div id="tyyldiv">
bbbbbbbbbbbbbb
</div>
我也觉得还是应该写到css里,直接这么写太难看了,
<!--
function show(aid,aname,did){
var showHref=document.getElementById(aid);
var showDiv=document.getElementById(did);
var allHref=document.getElementsByName(aname);
for(i=0;i<allHref.length;i++){
if(allHref[i]!=showHref){
allHref[i].className='mouseOff';
document.getElementById('d'+(i+1)).style.display='none';
}
}
showHref.className='mouseOn';
showDiv.style.display='block';
}
//-->
</script>
<style>
<!--
.mouseOn{
background:open.gif;
color:#f56006;
font-weight:bold;
font-size: 14px;
cursor:pointer;
}
.mouseOff{
background:closed.gif;
color:#5e522a;
font-weight:bold;
font-size: 14px;
cursor:pointer;
}
//-->
</style><a id='a1' name='a' onMouseOver="show('a1','a','d1','d');" class='mouseOn'>社会·财经 </a>
<a id='a2' name='a' onMouseOver="show('a2','a','d2','d');" class='mouseOff'>体育·娱乐 </a>
<a id='a3' name='a' onMouseOver="show('a3','a','d3','d');" class='mouseOff'>体育·娱乐2 </a>
<a id='a4' name='a' onMouseOver="show('a4','a','d4','d');" class='mouseOff'>体育·娱乐3 </a>
<div id="d1" style="display:block "'>
aaaaaaaaaaaaaa
</div>
<div id="d2" style="display:none ">
bbbbbbbbbbbbbb
</div>
<div id="d3" style="display:none ">
cccccccccccccc
</div>
<div id="d4" style="display:none ">
ddddddddddddddd
</div>
哎,楼主这样搞不好啊,不过我还是要坚守本分