<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡1</title> <style> #div1 div { width: 200px; height: 200px; background-color: #ccc; border: 1px solid pink; display: none; //默认不显示DIV } #div1 .active { background-color: greenyellow; } </style> <script> window.onload = function () { var oDiv = document.getElementById(‘div1‘); var aBtn = oDiv.getElementsByTagName(‘input‘); var aDiv = oDiv.getElementsByTagName(‘div‘); for(i=0;i<aBtn.length;i++){ aBtn[i].index = i; //给按钮自定义一个index属性,用于改变DIV aBtn[i].onclick = function () { for(i=0;i<aBtn.length;i++){ aBtn[i].className = ‘‘; //点击当前按钮时,取消对上一个按钮的设置 aDiv[i].style.display = ‘none‘; //点击当前按钮时,取消对上一个按钮对应的DIV的设置 } this.className = ‘active‘; //点击按钮时,背景颜色改变 aDiv[this.index].style.display = ‘block‘; } } } </script> </head> <body> <div id="div1"> <input class="active" type="button" value="教育"/> <input type="button" value="培训"/> <input type="button" value="招生"/> <input type="button" value="出国"/> <div style="display: block;">1234</div> <div>2345</div> <div>3456</div> <div>4567</div> </div> </body> </html>
原文：http://www.cnblogs.com/webellen/p/5425146.html