滑动门

<html><head>

<style type="text/css">

UL{list-style-type:none;margin:0; }
/*没有这个margin，界面就非常难看。图中上面的蓝色和下面的红框中间有距离*/
.ctt{padding-top:20px;border:1px solid red;text-align:center;height:100px;clear:both;border-top:0;}
.w800{margin:2px 0;150px;clear:both;}

.tb_{background-color:blue;}
.tb_   ul{height:20px;}
.tb_   li{float:left;cursor:pointer;50px;padding:3px,2px,0,8px;}
/*看清格式," .tb_   ul "中间一定要有空格呀。*/   控制LI中的字的位置的。

.nortab{color:yellow;}
.hovertab{color:white;background-color:green;height:23px;font-weight:bold;}
.dis{display:block;}
.undis{display:none}
</style>

<script type="text/javascript" language="javascript">
   function g(o)
   {
    return document.getElementById(o);
   }
   function Hoverli(n)
   {
    for(var i=1;i<=3;i++)
    {
     g('tb_'+i).className='nortab';
     g('tb_0'+i).className='undis';
    }
    g('tb_'+n).className='hovertab';
    g('tb_0'+n).className='dis';
   }
</script>
</head>
<body>
   <div class="w800">
    <div class="tb_">
     <ul>
      <li class="hovertab" id="tb_1" onmouseover="Hoverli(1)" style="text-algin:center;">美国

      </li>
      <li class="nortab" id="tb_2" onmouseover="Hoverli(2)">俄国</li>
    <li class="nortab" id="tb_3" onmouseover="Hoverli(3)">中国</li>
     </ul>

    </div>

    <div class="ctt">
     <div class="dis" id="tb_01">想打谁，就打谁</div>
     <div class="undis" id="tb_02">谁骂我，我打谁</div>
     <div class="undis" id="tb_03">谁打我，我骂谁</div>
    </div>
   </div>
</body>
</html>