<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .content{ display: none; width: 200px; height: 200px; border: 2px solid red; } .active{ } </style> </head> <body> <button>1</button> <button>2</button> <button>3</button> <div class="warpper"> <div class="content" >hehe</div> <div class="content">haha</div> <div class="content">heihei</div> </div> <script type="text/javascript"> var btn = document.getElementsByTagName('button'); var div= document.getElementsByClassName('content'); for(var i=0;i<btn.length;i++){ //循环给每一个按钮绑定一个事件 (function (n) { btn[i].onclick = function () { for(var j=0;j<div.length;j++){ btn[j].className="";//使全部按钮的样式为空 div[j].style.display="none"; } this.className="active";//给当前按钮设置一个active样式 div[n].style.display="block"; } }(i)) } </script> </body> </html>
