浙江桩基础施工公司:css+div实现标签卡Tab效果

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



代码如下：

Java代码

1. "text/css">    
2.  * {   
3.      list-style-type:none;   
4.      font-size:12px;   
5.      text-decoration:none;   
6.      margin:0;   
7.      padding:0;   
8.  }   
9.    .ucatch {   
10.      width:800px;   
11.      height:600px;   
12.      overflow:hidden;   
13.      margin:100px 100px;   
14.  }   
15.  .p1 {   
16.      display:block;   
17.      width:186px;   
18.      heigth:30px;   
19.      line-height:34px;   
20.      font-size:12px;   
21.      color:3b536a;   
22.      font-weight:bold;   
23.      background:url(c.png) no-repeat;   
24.  }   
25.  .p2 {   
26.      display:block;   
27.      width:161px;   
28.      heigth:30px;   
29.      line-height:34px;   
30.      font-size:12px;   
31.      color:898989;   
32.      font-weight:bold;   
33.      background:url(d.png) no-repeat;   
34.  }   
35.  .p3 {   
36.      display:block;   
37.      width:161px;   
38.      heigth:30px;   
39.      line-height:34px;   
40.      font-size:12px;   
41.      color:898989;   
42.      font-weight:bold;   
43.      background:url(e.png) no-repeat;   
44.  }   
45.  .ucatch_title {   
46.  margin-left:30px;   
47.  }   
48.  .ucatch_title li {   
49.      display:block;   
50.      float:left;   
51.      margin:11px 0 0 0;   
52.      display:inline;   
53.      text-align:center;   
54.  }   
55.  .ucatch_body {   
56.      clear:both;   
57.      display:block;   
58.      width:800px;   
59.      height:500px;   
60.      background:url(a.png) no-repeat; overflow:hidden;   
61.  }   
62.  .bb {   
63.  width:800px;   
64.  height:85px;   
65.  background:url(b.png) no-repeat; overflow:hidden;   
66.  }   
67.  .ucatch_text{   
68.  margin:10px 0 0 20px;   
69.  font:LMAnomRegExt;   
70.  font-size:28px;   
71.  color:white;   
72.  font-weight:bold;   
73.  }   
74.  .test{   
75.  margin:10px 0 0 10px;   
76.  background:white;   
77.  width:780px;   
78.  height:365px;   
79.  }   
80.     
81.  "javascript">    
82.    function ucatch(num){   
83.      for(var id = 1;id<=2;id++)   
84.      {   
85.      var testbody="test"+id;   
86.      var p = "p"+id;   
87.      if(id==num){   
88.      document.getElementById(testbody).style.display="block";   
89.      document.getElementById(p).className="p1";   
90.      }   
91.      else{   
92.          document.getElementById(testbody).style.display="none";   
93.          if(id==1){   
94.              document.getElementById(p).className="p3";   
95.          }else{   
96.              document.getElementById(p).className="p2";   
97.          }   
98.      }   
99.      }   
100.      }   
101.      
102.   
103.     class="ucatch">   
104.      class="bb">   
105.      class="ucatch_text">UCATCH