1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #div1 button{ 100px; height: 30px; background-color: gray; color: white; font-size: 18px;} 8 #div1 .active{background-color: orange; color: blue;} 9 #div1 div{ 440px; height: 300px; border: 1px solid black; display: none;} 10 </style> 11 <script> 12 window.onload=function(){ 13 var oDiv1=document.getElementById("div1"); 14 var aBtns=oDiv1.getElementsByTagName("button"); 15 var aDivs=oDiv1.getElementsByTagName("div"); 16 17 for(var i=0;i<aBtns.length;i++){ 18 aBtns[i].index=i; 19 aBtns[i].onclick=function(){ 20 for(var j=0;j<aBtns.length;j++){ 21 aDivs[j].style.display='none'; 22 23 aBtns[j].className=''; 24 } 25 aDivs[this.index].style.display='block'; 26 this.className="active"; 27 } 28 } 29 30 } 31 32 33 </script> 34 </head> 35 <body> 36 <div id="div1"> 37 <button class="active">HTML5</button> 38 <button>Python</button> 39 <button>Java</button> 40 <div style="display: block;">H5H5H5H5H5H5H5H5H5H5H5H5H5H5H5</div> 41 <div>PythonPythonPythonPythonPythonPythonPython</div> 42 <div>JavaJavaJavaJavaJavaJavaJavaJavaJava</div> 43 </div> 44 </body> 45 </html>