1 <html>
2 <head>
3 <title>1</title>
4 <style type='text/css'>
5 .div_content{
6 border:solid 1px green;
7 border-top-width:0px;
8 height:150px;
9 font-size:14px;
10 color:#333333;
11 padding:3px;
12 }
13 #tab{
14 margin:0px;
15 list-style-type:none;
16 border:solid 0px red;
17 }
18 #tab li{
19 width:80px;
20 height:30px;
21 float:left;
22 border:solid 1px green;
23 border-bottom-width:1px;
24 border-left-width:0px;
25 }
26 #main{
27 width:240px;
28 border:solid 0px red;
29 }
30 #tab #first_li{
31 border-left:solid 1px green;
32 border-bottom-width:0px;
33 }
34 #box2{
35 display:none;
36 }
37 #box3{
38 display:none;
39 }
40
41 </style>
42 </head>
43 <body>
44 <div id='main'>
45 <ul id='tab'>
46 <li id='first_li' onclick='fun(this,"box1");'></li>
47 <li onclick='fun(this,"box2");'></li>
48 <li onclick='fun(this,"box3");'></li>
49 </ul>
50 <div id='box1' class='div_content'>
51 div1
52 </div>
53 <div id='box2' class='div_content'>
54 div2
55 </div>
56 <div id='box3' class='div_content'>
57 div3
58 </div>
59 </div>
60 <script language='javascript'>
61 var tag='box1';
62 var nodes=document.getElementById('tab').childNodes;
63 function fun(object,show_div){
64 if(tag!=show_div){
65 object.style.borderBottomWidth='0px';
66 for(var i=0;i<nodes.length;i++){
67 if(nodes[i]!=object){
68 nodes[i].style.borderBottomWidth='1px';
69 }
70 }
71 document.getElementById(show_div).style.display='block';
72 for(var i=1;i<4;i++){
73 if('box'+i!=show_div){
74 document.getElementById('box'+i).style.display='none';
75 }
76 }
77 tag=show_div;
78 }
79 }
80
81 </script>
82
83 </body>
84 </html>
