tab切换

最新推荐文章于 2024-08-18 10:54:05 发布

賀崽

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量72

点赞数

文章标签： javascript js css html html5

本文链接：https://blog.csdn.net/Z_qing_he/article/details/115399331

版权

JavaScript 选项卡 DOM操作闭包事件监听

关键词由CSDN通过智能技术生成

tab切换

原生JavaScript封装tab选项卡


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>原生JavaScript封装选项卡插件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
            font-size: 14px;
            -webkit-user-select: none;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        .box {
            width: 500px;
            margin: 20px auto;
        }
        
        .box ul {
            position: relative;
            top: 1px;
        }
        
        .box ul:after {
            content: "";
            display: block;
            clear: both;
        }
        
        .box ul li {
            float: left;
            margin-right: 15px;
            width: 100px;
            height: 30px;
            border: 1px solid green;
            text-align: center;
            cursor: pointer;
        }
        
        .box ul li.selected {
            background: lightblue;
            border-bottom-color: lightblue
        }
        
        .box div {
            height: 150px;
            line-height: 150px;
            background: lightblue;
            border: 1px solid green;
            text-align: center;
            display: none;
        }
        
        .box div.selected {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box" id="tabFir">
        <ul>
            <li class="selected">页卡一</li>
            <li>页卡二</li>
            <li>页卡三</li>
        </ul>
        <div class="selected">内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>
</body>
<script>
    window.onload = function() {
        var tabFir = document.getElementById('tabFir'),
            oLis = tabFir.getElementsByTagName('li'),
            oDivs = tabFir.getElementsByTagName('div');

        debugger;
        for (var i = 0; i < oLis.length; i++) {
            (function(num) {
                oLis[i].onclick = function() { //这个匿名函数在匿名函数自执行的内部，这两者
                    //形成了一个闭包
                    changeTab(num); //最外层的每个匿名函数，就算执行环境被销毁了，
                    //但是由于changeTab(num),要引用其活动对象num
                    //所以活动对象仍然会留在内存中。
                    //由于在调用每个匿名函数时，我们传入了变量i.由于函数参数
                    /*是按值传递的，所以会将变量i的当前值，复制给参数num,而这个匿名函数
                    内部，又创建并返回num的闭包，这样一来，每个onclick回调函数都有自己
                    num变量的一个副本。因此可以返回各自不同的数值。
                    * */
                }
            })(i);
        }

        //按值传递
        function changeTab(n) {
            for (var i = 0; i < oLis.length; i++) {
                oLis[i].className = null;
                oDivs[i].className = null;
            }
            oLis[n].className = 'selected';
            oDivs[n].className = 'selected';
        }
    }
</script>

</html>

賀崽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab切换

tab切换原生JavaScript封装tab选项卡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JavaScript封装选项卡插件</title> <style> * { margin: 0; padding: 0;
复制链接

扫一扫