css+div实现标签卡Tab效果

用css+div实现的一个简单的标签卡的功能,最终效果如下面两张图片：



代码如下：

<STYLE type="text/css">
 * {
     list-style-type:none;
     font-size:12px;
     text-decoration:none;
     margin:0;
     padding:0;
 }
   .ucatch {
     width:800px;
     height:600px;
     overflow:hidden;
     margin:100px 100px;
 }
 .p1 {
     display:block;
     width:186px;
     heigth:30px;
     line-height:34px;
     font-size:12px;
     color:3b536a;
     font-weight:bold;
     background:url(c.png) no-repeat;
 }
 .p2 {
     display:block;
     width:161px;
     heigth:30px;
     line-height:34px;
     font-size:12px;
     color:898989;
     font-weight:bold;
     background:url(d.png) no-repeat;
 }
 .p3 {
     display:block;
     width:161px;
     heigth:30px;
     line-height:34px;
     font-size:12px;
     color:898989;
     font-weight:bold;
     background:url(e.png) no-repeat;
 }
 .ucatch_title {
 margin-left:30px;
 }
 .ucatch_title li {
     display:block;
     float:left;
     margin:11px 0 0 0;
     display:inline;
     text-align:center;
 }
 .ucatch_body {
     clear:both;
     display:block;
     width:800px;
     height:500px;
     background:url(a.png) no-repeat; overflow:hidden;
 }
 .bb {
 width:800px;
 height:85px;
 background:url(b.png) no-repeat; overflow:hidden;
 }
 .ucatch_text{
 margin:10px 0 0 20px;
 font:LMAnomRegExt;
 font-size:28px;
 color:white;
 font-weight:bold;
 }
 .test{
 margin:10px 0 0 10px;
 background:white;
 width:780px;
 height:365px;
 }
 </STYLE>
 <script language="javascript">
   function ucatch(num){
     for(var id = 1;id<=2;id++)
     {
     var testbody="test"+id;
     var p = "p"+id;
     if(id==num){
     document.getElementById(testbody).style.display="block";
     document.getElementById(p).className="p1";
     }
     else{
         document.getElementById(testbody).style.display="none";
         if(id==1){
             document.getElementById(p).className="p3";
         }else{
             document.getElementById(p).className="p2";
         }
     }
     }
     }
 </script>

    <div class="ucatch">
     <div class="bb">
     <div class="ucatch_text">UCATCH</div>
     <ul class="ucatch_title" id="woaicsstitle">
         <li><a class="p1" id="p1" xhref="javascript:void(0)" onclick="javascript:ucatch(1)">Tab One</a></li>
         <li><a class="p2" id="p2" xhref="javascript:void(0)" onclick="javascript:ucatch(2)">Tab Two</a></li>
     </ul>
     </div>
     <div class="ucatch_body">
         <div class="test" id="test1" style="display:block;">欢迎来到UCATCH</div>
         <div class="test" id="test2" style="display:none;">www.ucatch.cn</div>
     </div>
   </div>