js tab切换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 自定义滚动条</title> <style> #div1 input{ background: #fff; } #div1 input.active{ background: yellow; } #div1 div{ width: 200px; height: 200px; background: #ccc; 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 class="active" type="button" value="aaa"/> <input type="button" value="bbb"/> <input type="button" value="ccc"/> <div style="display: block;">aaa</div> <div>bbb</div> <div>ccc</div> </div> </body> </html>