|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0;padding: 0; } .sty{ width: 200px; height: 200px; background-color: yellow; font-size: 50px; display:none; } button{ width:50px; height:20px; background-color: red; } </style> <script type="text/javascript"> window.onload=function(){ var btns= document.getElementsByTagName("button"); var divs= document.getElementsByTagName("div"); for(var i=0;i<btns.length;i++){ //方法1： // btns[i].index = i; // btns[i].onclick=function(){ // for(var i=0;i<btns.length;i++){ // btns[i].style.backgroundColor=""; // divs[i].style.display="none"; // } // btns[this.index].style.backgroundColor="yellow"; // divs[this.index].style.display="block"; // } //方法2： btns[i].onclick=function(){ for(var i=0;i<btns.length;i++){ if(this==btns[i]){ btns[i].style.backgroundColor="yellow"; divs[i].style.display="block"; }else{ btns[i].style.backgroundColor=""; divs[i].style.display="none"; } } } } } </script> </head> <body> <button >按鈕1</button> <button >按鈕2</button> <button >按鈕3</button> <button >按鈕4</button> <div class="sty" style="display:block;">1</div> <div class="sty">2</div> <div class="sty">3</div> <div class="sty">4</div> </body> </html> |
|
|
