原生 js 鼠标点击时Tab页的切换显示

最新推荐文章于 2023-05-28 23:35:58 发布

lilyheart1

最新推荐文章于 2023-05-28 23:35:58 发布

阅读量226

点赞数

分类专栏：前端文章标签： js Tab标签页

本文链接：https://blog.csdn.net/lilyheart1/article/details/83059851

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!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 gray;
        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 gray;
        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');

    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>