程序员的出路

alex.w的Blog

导航

简单的Tab菜单，明天再想想

Posted on 2008-04-23 22:35  alex.w  阅读(224)  评论(0)    收藏  举报

<style type="text/css">
<!--
body{
text-align:center}
.box{
width:310px;}
.menu{
width:310px;}
.title_1{
width:140px; float:left; background:#DEEFFE; border:1px #6699FF solid; margin-left:5px;}
.title_1a{
width:140px; float:left; background:#FFCC99; border:1px #6699FF solid; margin-left:5px;}
.news{
border:1px #6699FF solid; color:#FF0000; font-size:larger; font-family:黑体; margin-top:5px; }
-->
</style>
<script language="javascript">
function showbox(index){
for (var i=1;i<=3;i++)
{
 if( document.getElementById("content"+i.toString()) != null )
 {
  document.getElementById("content"+i.toString()).style.display='none';
 }
 if( document.getElementById("tt"+i.toString()) != null )
 {
  document.getElementById("tt"+i.toString()).className="title_1";
 }
}
 document.getElementById("content"+index.toString()).style.display='block';
 document.getElementById("tt"+index.toString()).className="title_1a";
}

</script>
<body>
<div id=content1 class="box">
<div class="menu">
<div class="title_1" id="tt1" onMouseOver="showbox(1)">菜单一</div>
<div class="title_1" id="tt2" onMouseOver="showbox(2)">菜单二</div>
</div>
<div class="News">大家都来学习吧！</div>
</div>

<div id=content2 class="box" style="DISPLAY: none">
<div class="menu">
<div class="title_1" id="tt1" onMouseOver="showbox(1)">菜单一</div>
<div class="title_1" id="tt2" onMouseOver="showbox(2)">菜单二</div>
</div>
<div class="News">大家都去玩吧，学习太累！</div>
</div>
</body>



为什么第二个菜单鼠标经过时样式不会改变呢，郁闷。