javascript:Tab选项卡
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>