选项卡案例实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>选项卡小案例</title>
  6.     <link rel="stylesheet" href="reset.min.css">
  7.     <style>
  8.         .cardBox {
  9.             width: 600px;
  10.             margin: 20px auto;
  11.         }
  12.         .cardBox ul {
  13.             position: relative;
  14.             top: 1px;
  15.         }
  16.         .cardBox ul li {
  17.             float: left;
  18.             margin-right: 20px;
  19.             width: 80px;
  20.             height: 30px;
  21.             text-align: center;
  22.             line-height: 30px;
  23.             border: 1px solid #000;
  24.         }
  25.         .cardBox div {
  26.             width: 600px;
  27.             height: 300px;
  28.             text-align: center;
  29.             line-height: 300px;
  30.             border: 1px solid #000;
  31.             display: none;
  32.         }
  33.         .cardBox li.active {
  34.             background-color: aqua;
  35.             border-bottom-color: aqua;
  36.         }
  37.         .cardBox div.active {
  38.             background-color: aqua;
  39.             display: block;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <div class="cardBox" id="cardBox">
  45.         <ul class="clearfix">
  46.             <li class="active">新闻</li>
  47.             <li>娱乐</li>
  48.             <li>图片</li>
  49.         </ul>
  50.         <div class="active">新闻页</div>
  51.         <div>娱乐页</div>
  52.         <div>图片页</div>
  53.     </div>
  54.     <script>
  55.         /* 效果：当点击LI标签让对应的div显示
  56.          * 思路：
  57.          *    1、当点击第一个LI时让第一个LI和第一个div同时加上active的class名，
  58.          *    2、并让其他两个没有active的class名
  59.          * （也可以是点击LI时，先让所有LI和DIV都没有active的class名，
  60.          *      点击谁，让谁有active的class名）
  61.          */
  62.         let cardBox = document.getElementById("cardBox"),
  63.             list = cardBox.getElementsByTagName("li"),
  64.             divs = cardBox.getElementsByTagName("div");
  66.         function changeBox(index) {
  67.             // 让点击的这个LI和DIV有选中样式（但是创建函数的时候，还不知道点击的是哪一个LI呢，只有点击的时候才知道，此时我们要把点击的是哪一个作为形参，提供对应的入口） =>index形参变量：点击的是谁，就在执行changeBox的时候，把点击这一项的索引传递给我
  68.             for (var i = 0; i < list.length; i++) {
  69.                 list[i].className = "";
  70.                 divs[i].className = "";
  71.             }
  72.             list[index].className = "active";
  73.             divs[index].className = "active";
  74.         }
  75.         for (var i = 0; i < list.length; i++) {
  76.             //=>list[i] 获取到的LI元素对象（堆，有很多内置的属性，也可以设置自定义属性）
  77.             // 我们在每一轮循环的时候，给当前元素对象的堆内存中设置一个自定义属性index，属性值存储当前LI元素对象的索引
  78.             list[i].index = i
  79.             list[i].onclick = function () {
  80.                 // 传递当前点击这个LI的索引
  81.                 // this => 当前点击的这个LI，而我们基于它的自定义属性index，就可以拿到它的索引
  82.                 changeBox(this.index);
  83.             }
  84.         }
  85.     </script>
  86. </body>
  87. </html>
  88. 复制代码

不能直接用i当作形参的原因

for (var i = 0; i < list.length; i++) {
    list[i].onclick = function () {
        changeBox(i);
    }
}
// 这样写不行的原因：点击每一个LI的时候，绑定事件函数中的i都是3（循环结束后i的结果）
/*
i=0 第一轮循环  i++  
    list[0].onclick = function () {
    此处是创建函数，函数存储的是一堆破字符串，我们看到的i，也只是一个字符
    “changeBox(i);”
    }
i=1 第二轮循环 i++ 
    list[1].onclick = function () {
    “changeBox(i);”
    }
i=2 第三轮循环 i++ 
    list[2].onclick = function () {
    “changeBox(i);”
    }
i=3 循环结束
........
手欠点了第二个LI，触发第二个LI绑定的函数
    changeBox(i)  此时的i已经是循环结束后的3了
*/
复制代码

21.自定义属性实现选项卡小案例 - 图1