求一个JS标签内容轮换效果。。

Question

 这是我写的 ，没用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>现在有两个问题，代码感觉不规范，不知道是不是所有浏览器都支持。。
还有个问题就是鼠标移走之后，两个标签的颜色没有恢复 。

Answer 1

AA BB 的背景不必用JS可以用CSS样式来控制

Answer 2

 你没看吗 ？
我本来就是用CSS控制的啊  /。。
  

Answer 3

<style>
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>

Answer 4

<a id='shcj' onmouseover="javascript:shcjdiv.style.display='block';tyyldiv.style.display='none';shcj.background='/closed.gif';tyyl.background='/open.gif';this.style.color='#f56006';" style="font-weight:bold;color: #f56006;font-size: 14px;cursor:pointer;" onMouseOut="this.style.color='#5e522a'">社会·财经 </a> 
<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里，直接这么写太难看了，

Answer 5

<script type="text/javascript">
<!--
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>
哎，楼主这样搞不好啊，不过我还是要坚守本分

Answer 6

show('XX','a','XX','d');这个把",'d'"去掉