1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #title{ 12 width: 306px; 13 overflow: hidden; 14 margin: 50px auto 0px; 15 } 16 #title h2{ 17 width: 100px; 18 height: 30px; 19 border: 1px solid #000; 20 font-size: 30px; 21 text-align: center; 22 line-height: 30px; 23 float: left; 24 } 25 #con{ 26 width: 304px; 27 border: 1px solid #000; 28 height: 200px; 29 margin: 0 auto; 30 } 31 #con li{ 32 width: 304px; 33 height: 200px; 34 font-size: 40px; 35 color: #ccc; 36 line-height: 200px; 37 text-align: center; 38 list-style: none; 39 display: none; 40 } 41 .select{ 42 background: #ccc; 43 } 44 #con .show{ 45 display: block; 46 } 47 </style> 48 </head> 49 <body> 50 <div id="title"> 51 <h2 class="select" onclick="tab(0)">标题一</h2> 52 <h2 onclick="tab(1)">标题二</h2> 53 <h2 onclick="tab(2)">标题三</h2> 54 </div> 55 <ul id="con"> 56 <li class="show">内容一</li> 57 <li>内容二</li> 58 <li>内容三</li> 59 </ul> 60 </body> 61 <script> 62 var title=document.getElementById('title'); 63 var hs=title.getElementsByTagName('h2'); 64 // alert(hs.length); 65 var con=document.getElementById('con'); 66 var lis=con.getElementsByTagName('li'); 67 /* function tab(a) { 68 for (var i = 0; i < hs.length; i++) { 69 hs[i].className=''; 70 lis[i].className=''; 71 }; 72 hs[a].className='select'; 73 lis[a].className='show'; 74 };*/ 75 76 function tab(a) { 77 for (var i = 0; i <hs.length; i++) { 78 hs[i].className=''; 79 lis[i].className=''; 80 }; 81 hs[a].className='select'; 82 lis[a].className='show'; 83 }; 84 85 /* hs[0].onclick=function() { 86 for (var i = 0; i < hs.length; i++) { 87 hs[i].className=''; 88 lis[i].className=''; 89 }; 90 ha[0]. 91 };*/ 92 </script> 93 </html>