用JavaScript的闭包做一个简单的滑动门（复习闭包）

用JavaScript的闭包做一个简单的滑动门（复习闭包）

本次做的是一个小作业，滑动门，结果如下所示

点击学习区下方就会现实学习的地方，点击工作区下方就会显示工作的区域，点击娱乐下方就会显示娱乐的区域。

html部分：

这里使用了flex布局：

<div class="fa">
        <div id="fir">
                <div class="unon">学习</div>
                <div class="unon">工作</div>
                <div class="on">娱乐</div>
        </div>
        <div id="sec">
            <div class="unshow">学习的地方</div>
            <div class="unshow">工作的地方</div>
            <div class="show">娱乐的地方</div>
        </div>
</div>

css部分：

	   body{
            margin: 0;
            padding: 0;
        }
        .fa{
            width: 300px;
            height: 250px;
            border: 1px solid black;
        }
        #fir{
            width: 100%;
            height: 40px;
            display: flex;
            justify-content:space-between;
        }
        #fir div{
            font-size: 17px;
            width: 100px;
            cursor: pointer;
        }
        .unon{
            background:#999999;
        }
        .on{
            background:#fff;
        }
        #sec{
            width: 100%;
            height: 210px;
            border-top: 1px solid black;
        }
        .unshow{
            display: none;
        }
        .show{
            display: block;
        }

Javascript部分：

<script>
	 var obj1=document.getElementById("fir").getElementsByTagName("div");//获取标签
        var obj2=document.getElementById("sec").getElementsByTagName("div");
        for (var i = 0; i < obj1.length; i++) {
            (function (k) {//闭包 这里是关键
                obj1[k].onclick = function () {
                    for (var m = 0; m < obj1.length; m++) {
                        obj1[m].className = "unon";
                        obj2[m].className = "unshow";
                    }
                    obj1[k].className = "on";
                    obj2[k].className = "show";
                };
            })(i);
        }
</script>