第一周、课时15：综合案例——选项卡

朴灿烈づ我的快乐病毒、 2022-06-08 00:21 169阅读 0赞

### 综合案例——选项卡 ###

--------------------

html代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <link rel="stylesheet" type="text/css" href="3.css" />
    </head>
    <body>
    <div id="table">
        <ul>
            <li class="select">视频</li>
            <li>综艺</li>
            <li>秒拍</li>
        </ul>
        <div class="select">视频内容</div>
        <div>综艺内容</div>
        <div>秒拍内容</div>
    </div>
    <script type="text/javascript" src="3.js"> </script>
    </body>
    </html>

css代码：

body,div,ul,li{ margin: 0px; padding:0px; font-family: Arial; font-size: 20px; }
    ul,li{ list-style: none; }
    #table{ margin: 10px auto 0; width:500px; }
    #table ul{ position: relative; top: 1px; z-index: 100; }
    #table ul li{ width:100px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #dddddd; float: left; margin-right: 10px; cursor: pointer; }
    #table ul li.select{ border-bottom: none; background: -webkit-linear-gradient(top left,#fff000,#dddddd); }
    #table div{ height: 100px; line-height: 100px; text-align: center; border:1px solid #ddd; clear: both; display: none; }
    #table div.select{ display: block; }

js代码：

//第一步：分析需求和思路：
    /* 鼠标滑到某一个li上面，先让所有的li和div都没有select样式，然后再让当前的有这个select样式 */
    //第二步：要操作谁就先获取谁
    var oTab = document.getElementById("table");
    var oLis = oTab.getElementsByTagName("li");
    var oDivs = oTab.getElementsByTagName("div");
    //第三步：制定一个功能方法，实现我们的需求
    /*nIndex是我们定义的形参，代表当前被选中元素的索引*/
    function tableChange(nIndex) { 
        for (var i = 0; i < oLis.length; i++) {
            oLis[i].className = "";
            oDivs[i].className = "";
        }
        oLis[nIndex].className = "select";
        oDivs[nIndex].className = "select";
    }
    //第四步：给li绑定鼠标一移上去的事件
    for (var i = 0; i < oLis.length; i++) {
        oLis[i].newIndex = i; //在每一次循环的时候，把每一个li的索引定义在自定义属性newIndex上
        oLis[i].onmouseover = function () {  //循环的时候，函数会形成一个私有作用域，先循环3次，形成了3个私有作用域，但是不能执行，因为i是3
            tableChange(this.newIndex);
        };
    }

js简化后代码：

思想：  
设置两个select的class属性，当鼠标选中哪个标签时，就给哪个标签添加select属性。如：当选中“视频”时，需要给li和li对应的div添加select属性。  
js实现步骤：  
1、要操作谁就先获取谁，即先找到要操作的标签元素li和div  
2、定义一个自定义属性，用来保存li的索引  
3、当鼠标移入时，清空所有的className属性，然后给当前的li和div添加select的class属性