javascript选项卡2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        button{ width: 40px; height: 30px; line-height: 30px; text-align:center;  }
        button.active{ background-color: yellow }
        .content{ width: 200px; height: 200px; border:2px solid red; display: none; }
    </style>
</head>
<body>
    <div class="wrapper">
        <button class="active">11</button>
        <button>2</button>
        <button>3</button>
        <div class="content" style="display:block">1111111111</div>
        <div class="content">222222222</div>
        <div class="content">3333</div>
    </div>
    <script type="text/javascript">
        var btn = document.getElementsByTagName('button');
        var content = document.getElementsByClassName('content');
        for (var i = 0; i < btn.length; i++) {
            //形成一个闭包
            (function(n){
                btn[n].onclick=function(){
                //清除同级元素的当前类
                for (var j = 0; j<btn.length; j++) {
                    btn[j].className = "";
                    content[j].style.display = "none";
                }
                //点击添加当前类
                this.className = "active";
                content[n].style.display = "block";
            }
            }(i))
        }
    </script>
</body>
</html>
效果图：