JS当中选项卡闭包问题（解决）

最新推荐文章于 2022-05-13 16:04:56 发布

娶个村姑当大妾

最新推荐文章于 2022-05-13 16:04:56 发布

阅读量793

点赞数

分类专栏： javascript 文章标签：闭包选项卡闭包解决

本文链接：https://blog.csdn.net/bug_money/article/details/54630359

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

作用域当中的变量

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>选项卡</title>
    <style type="text/css"> 
        ul{margin: 0;padding: 0}
        ul li{list-style:none;}
        button.current{
            background-color: red;
        }
        #content{
            width: 260px;
            height: 200px;
            border: 1px solid #ddd;
            overflow: hidden;
        }
        #content li{
            display: none;
            width: 250px;
            height: 195px;
            background-color: #ddd;
            margin: 0 auto;
        }
        #content li.current{
            display: block;
        }
    </style>
    <script type="text/javascript">
    window.onload = function(){
        var btns = document.getElementsByTagName("button");
        var lis = document.getElementById("content").children;
        /*  
        //闭包
        for(var i=0; i<btns.length;i++){
            btns[i].onclick = function(){
                // 设置当前的按钮为current
                for(var j=0; j<btns.length;j++){
                    btns[j].removeAttribute("class");
                }
                this.setAttribute("class","current");

                // 将内容区对应的设置为current
                for(var k = 0;k<lis.length;k++){
                    lis[k].removeAttribute("class");
                }
                alert(i);
                lis[i].setAttribute("class","current");
            };
        }*/
**使用匿名函数的调用传递外部变量到函数内部，并返回匿名函数，维护一个变量**
        // 解决闭包
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = (function(num){
                return function(){
                    //将当前按钮设置为current
                    for(var j=0;j<btns.length;j++){
                        btns[j].removeAttribute("class");
                    }
                    this.setAttribute("class","current");

                    //将内容区对应的li置为current
                    for(var k=0;k<lis.length;k++){
                        lis[k].removeAttribute("class");
                    }
                    lis[num].setAttribute("class","current");
                }
            })(i);
        }
    };

    </script>
</head>
<body>
    <button id="h1" class="current">商品信息</button>
    <button id="h2">参数配置</button>
    <button id="h3">商品评价</button>
    <ul id="content">
        <li id="c1" class="current">商品信息的内容...</li>
        <li id="c2">配置参数的内容...</li>
        <li id="c3">商品评价的内容...</li>
    </ul>
</body>
</html>

娶个村姑当大妾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS当中选项卡闭包问题（解决）

作用域当中的变量<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF
复制链接

扫一扫

专栏目录