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

[simon803]

希望大家给的代码越简单越好/。。。
很普通的一个效果 /。 就是这样的
AAAAA BBBBB
<div id=aa>
aaaaaa
</div>
<div id=bb>
bbbbbb
</div>
鼠标放在AAAAA上边显示<div id=aa>的内容，放在BBBBB上边显示<div id=bb>的内容，并且
AAAAA，BBBBB的背景图片也跟着变动/。


再求一个JS代码，就是三个或者4个轮换的代码 。。
我想应该和两个轮换的不一样 /。

[simon803]

这是我写的 ，没用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>

现在有两个问题，代码感觉不规范，不知道是不是所有浏览器都支持。。
还有个问题就是鼠标移走之后，两个标签的颜色没有恢复 。

[lkh42002]

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

[simon803]

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

[llddy]

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

[simon803]

楼上的 /。。。
你没看明白我想问的问题吧 。
你这个就是最最简单的导航突显，不是我要的 。。

[阳二快跑]

<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里，直接这么写太难看了，

[阳二快跑]

<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>
哎，楼主这样搞不好啊，不过我还是要坚守本分

[阳二快跑]

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