选项卡案例（7）

最新推荐文章于 2023-07-12 19:16:31 发布

向上的二狗

最新推荐文章于 2023-07-12 19:16:31 发布

阅读量109

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_45738592/article/details/120206097

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>选项卡案例</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <style>
        .tabBox {
            margin: 20px auto;
            width: 500px;
        }

        .tabBox ul {
            position: relative;
            top: 1px;
            /*相对在于自己之前的位置向下移动1PX，使边框重合*/
        }

        .tabBox ul li {
            display: inline-block;
            margin-right: 10px;
            padding: 0 10px;
            line-height: 33px;
            border: 1px solid #AAA;
            cursor: pointer;
        }

        .tabBox ul li.active {
            color: lightcoral;
            font-weight: bold;
            border-bottom-color: #FFF; /*当前LI的边框覆盖着DIV的边框,我们让LI的下边框是背景颜色白色，这样看上去就像没边框了*/
        }

        .tabBox div {
            display: none;
            line-height: 148px;
            text-align: center;
            border: 1px solid #AAA;
        }

        .tabBox div.active {
            display: block;
        }
    </style>
</head>
<body>
<div class="tabBox" id="tabBox">
    <ul>
        <li class="active">新闻</li>
        <li>电影</li>
        <li>音乐</li>
    </ul>
    <div class="active">中国加油</div>
    <div>复仇者联盟三</div>
    <div>没时间听音乐</div>
</div>
<script src="js/tab.js"></script>
</body>
</html>

//基于自定义属性方式完成选项卡
/*
 * 【思路】
 *   1. 给所有的LI绑定点击事件，当点击任何一个LI的时候，都做第二步操作
 *   2. 可以先让所有的LI&&DIV的class都为空（xxx.className=''），再让当前点击的这个LI和对应的DIV有ACTIVE这个样式类即可
 */
var tabBox = document.getElementById('tabBox');
var tabList = tabBox.getElementsByTagName('li');
var divList = tabBox.getElementsByTagName('div');

//=>封装一个方法完成页卡切换
function changeTab(n) {
    //=>N:形参变量,当执行这个方法的时候,会把当前点击的这个LI的索引传递过来

    //=>1.所有都没有选中样式
    for (var i = 0; i < tabList.length; i++) {
        tabList[i].className = '';
        divList[i].className = '';
    }
    //=>2.当前点击的有选中样式
    tabList[n].className = 'active';
    divList[n].className = 'active';
}

//=>自定义属性方式
for (var i = 0; i < tabList.length; i++) {
    //=>每一轮循环的时候，给每一个LI设置一个自定义属性“ZF-INDEX”，存储的值是各自的索引
    /*
     * TAB-LIST
     * {
     *   0:{zfIndex:0,...},
     *   1:{zfIndex:1,...},
     *   2:{zfIndex:2,...},
     *   length:3
     * }
     */
    tabList[i]['zfIndex'] = i;
    tabList[i].onclick = function () {
        //this:代表的是当前点击的这个LI
        changeTab(this.zfIndex);//=>需要索引
    }
}


//===>不行的代码
/*for (var i = 0; i < tabList.length; i++) {
    //tabList[i] <=>每一轮循环当前要操作的那个LI对象
    tabList[i].onclick = function () {
        //=>事件绑定:给当前元素的某一个事件绑定一个方法,绑定的时候方法没有执行(属于创建一个方法),当在页面中手动触发点击事件的时候绑定的方法才会执行
        alert(i);
        changeTab(i);//=>需要把当前点击的这个LI的索引传递进来
    }
}*/
/*i=0 第一次循环
tabList[0].onclick=function () {
  "changeTab(i);"
};
i++
i=1 第二次循环
tabList[1].onclick=function () {
  "changeTab(i);"  changeTab(i)
};
i++
i=2
tabList[2].onclick=function () {
    "changeTab(i);"
};
i++
i=3
循环结束*/

/*
tabList[0].onclick = function () {
    changeTab(0);
};
tabList[1].onclick = function () {
    changeTab(1);
};
tabList[2].onclick = function () {
    changeTab(2);
};
*/

for (var i = 0; i < tabList.length; i++) {

    tabList[i].onclick = function () {

        changeTab(i);

        //=>执行方法，形成一个私有的栈内存，遇到变量I，I不是私有变量，向上一级作用域查找（上级作用域WINDOW）

//=>当我们点击的时候，外层循环已经结束（能点击的时候页面已经加载完成，页面加载完成预示着Js代码都已经执行完成，也就是循环也都执行完成了），外层循环结束已经让全局下的I=LI的总长度=3

        //=>所有的事件绑定都是异步编程（同步编程：一件事一件事的做，当前这件事没完成，下一个任务不能处理 / 异步编程：当前这件事件没有彻底完成，不在等待，继续执行下面的任务），绑定事件后，不需要等待执行，继续执行下一个循环任务，所以当我们点击执行方法的时候，循环早已结束（让全局的I等于循环最后的结果3）

    }

}

//=>解决方案：基于ES6解决
for (let i = 0; i < tabList.length; i++) {
    tabList[i].onclick = function () {
        changeTab(i);
    }
}

//=>基于ES6中的LET来创建变量,是存在块级作用域的(类似于私有作用域)
//作用域：（栈内存）
//1.全局作用域
//2.私有作用域（函数执行）
//3.块级作用域（一般用大括号包起来的都是块级作用域，前提是ES6语法规范）

//=>解决方案：闭包
for (var i = 0; i < tabList.length; i++) {
    ~function (i) {
        tabList[i].onclick = function () {
            changeTab(i);
        }
    }(i);
}

for (var i = 0; i < tabList.length; i++) {
    tabList[i].onclick = function (i) {
        return function () {
            changeTab(i);
        }
    }(i);
}

//=>解决方案：闭包

for (var i = 0; i < tabList.length; i++) {

    tabList[i].onclick = (function (n) {

        //=>让自执行函数执行,把执行的返回值(RETURN)赋值给ON-CLICK（此处ON-CLICK绑定的是返回的小函数，点击的时候执行的是小函数），自执行函数在给事件赋值的时候就已经执行了

        var i = n;

        return function () {

            changeTab(i);//=>上级作用域：自执行函数形成的作用域

        }

    })(i);

}

/*

* i=0 第一次循环

*   tabList[0].onclick = (function(n){

*      //=>自执行函数执行形成一个私有作用域（不释放：返回的函数对应的堆地址被外面的事件占用了）

*      //1.形参赋值 n=0

*      //2.变量提升 var i;

*      var i=n; //=>i=0

*      return function(){//=>点击的时候执行的是小函数

*         changeTab(i);

*      }

*   })(i);//=>把本次全局I(0)当做实参传递给形参n

*

* i=1 第二次循环

*   tabList[1].onclick = (function(n){

*      var i=n; //=>i=1

*      return function(){

*         changeTab(i);

*      }

*   })(1);

*

* ...

*

* 总结：循环三次，形成三个不销毁的私有作用域（自执行函数执行），而每一个不销毁的栈内存中都存储了一个私有变量I，而这个值分别是每一次执行传递进来的全局I的值（也就是：第一个不销毁的作用域存储的是0，第二个是1，第三个是2）；当点击的时候，执行返回的小函数，遇到变量I，向它自己的上级作用域查找，找到的I值分别是：0/1/2，达到了我们想要的效果；

*/

/*for (var i = 0; i < tabList.length; i++) {

    /!*原理都是形成三个不销毁的私有作用域,分别存储需要的索引值*!/

    (function (n) {

        tabList[n].onclick = function () {

            changeTab(n);

        }

    })(i);

}*/

var oTab = document.getElementById('tab'),
    tabList = oTab.getElementsByTagName('li'),
    divList = oTab.getElementsByTagName('div');

for (var i = 0; i < tabList.length; i++) {
    tabList[i].myIndex = i;
    tabList[i].onmouseover = function () {
        //=>清空所有
        for (var j = 0; j < tabList.length; j++) {
            tabList[j].className = divList[j].className = '';
        }
        //=>当前有选中
        this.className = 'active';
        divList[this.myIndex].className = 'active';
    }
}

var oTab = document.getElementById('tab'),
    tabList = oTab.getElementsByTagName('li'),
    divList = oTab.getElementsByTagName('div');

var lastIndex = 0;
for (var i = 0; i < tabList.length; i++) {
    tabList[i]._index = i;//=>_index等价于myIndex
    tabList[i].onclick = function () {
        if (this._index === lastIndex) return;//=>如果当前点击的索引和上一次索引相同（点击的就是上一个被选中的），我们不做任何事情

        //=>清空上一次
        tabList[lastIndex].className = "";
        divList[lastIndex].className = "";

        //=>当前的有选中样式
        this.className = "active";
        divList[this._index].className = "active";

        //=>修改LAST-INDEX值，让当前本选中的索引作为下一次点击要清除的上一次的索引
        lastIndex = this._index;
    }
}

var oTab = document.getElementById('tab'),
    tabList = oTab.getElementsByTagName('li'),
    divList = oTab.getElementsByTagName('div');

//=>1.传递对象
for (var i = 0; i < tabList.length; i++) {
    tabList[i].onclick = function () {
        tabChange1(this);
    }
}

function tabChange1(ele) {
    for (var j = 0; j < tabList.length; j++) {
        //=>如果当前循环的LI和传递进来点击的那个元素相同，说明当前循环的这个LI就是被点击的，让其有选中样式
        if(tabList[j] === ele){
            tabList[j].className = "active";
            divList[j].className = "active";
            continue;
        }
        //=>不相等，则不是被点击的，我们取消选中样式即可
        tabList[j].className = "";
        divList[j].className = "";
    }
}

向上的二狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡案例（7）

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>选项卡案例</title> <link rel="stylesheet" href="css/reset.min.css"> <style> .tabBox { margin: 20px auto; .
复制链接

扫一扫