tab切换菜单/闭包

最新推荐文章于 2023-08-10 18:55:59 发布

mj_leona

最新推荐文章于 2023-08-10 18:55:59 发布

阅读量391

点赞数

本文链接：https://blog.csdn.net/mj_leona/article/details/79531145

版权

<style>

.current{

        background: pink;
}

.bigbox{
        width: 400px;
        margin: 100px auto;
        border: 1px solid #d4629d;
}
.but div{
        width: 400px;
        height: 300px;
        background-color: #cccccc;
        display: none;
}

</style>

<div class="bigbox">
        <div id="table">
                <button>第一个</button>
                <button>第二个</button>
                <button>第三个</button>
                <button>第四个</button>
                <button>第五个</button>
        </div>
        <div class="but" id="buttt">
                <div style="display: block">1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
        </div>
</div>

<script>

//正常写法
        var butts=document.getElementById("table").getElementsByTagName("button");
        var buttt=document.getElementById("buttt").getElementsByTagName("div");
        for(var  k=0; k<butts.length; k++){
                butts[k].index=k;  //获取当前事件位置
                butts[k].onmouseover = function () {
                       for (var l=0; l<butts.length; l++){
                               butts[l].className = "";       //删除所有样式
                               buttt[l].style.display = "none";
                       }
                       this.className = "current";            //指定当前事件位置样式
                       buttt[this.index].style.display="block";
                }
        }

//闭包写法
    var butts=document.getElementById("table").getElementsByTagName("button");
    var buttt=document.getElementById("buttt").getElementsByTagName("div");
    for(var  k=0; k<butts.length; k++){
        butts[k].onmouseover = tab(i);
    } 
    
    function tab(num) {
        return function () {
            for (var l=0; l<butts.length; l++){
                butts[l].className = "";       //删除所有样式
                  buttt[l].style.display = "none";
            }
            butts[num].className = "current";            //指定当前事件位置样式
             buttt[num].style.display="block";
        }
    }