ちょうきょう666

导航

javascript2选项卡 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #div1 button{width: 100px; height: 30px; background-color: gray; color: white; font-size: 18px;}
 8             #div1 .active{background-color: orange; color: blue;}
 9             #div1 div{width: 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>

 

posted on 2020-12-18 14:14  ちょうきょう666  阅读(55)  评论(0)    收藏  举报