js選項卡簡單切換
阿新 • • 發佈：2019-02-08
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #div1 .active{background: yellow;} #div1 div{width:200px; height: 200px; background: #CCC; border: 1px solid #66ff00;display: none;} </style> <script> window.onload = function() { var oDiv=document.getElementById('div1'); var aBtn = oDiv.getElementsByTagName('input'); var aDiv = oDiv.getElementsByTagName('div'); for(var i =0;i<aBtn.length;i++) { aBtn[i].index =i; aBtn[i].onclick = function() { for(var i=0;i<aBtn.length;i++){ aBtn[i].className=''; aDiv[i].style.display='none'; } this.className = 'active'; aDiv[this.index].style.display='block'; }; } }; </script> </head> <body> <div id="div1"> <input type="button" class="active" value="教育"/> <input type="button" value="招生"/> <input type="button" value="培訓"/> <input type="button" value="人文"/> <div style="display: block" >11111</div> <div>22222</div> <div>33333</div> <div>4444</div> </div> </body> </html>