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

来源：互联网发布：centos安装glibc2.17 编辑：程序博客网时间：2024/05/19 23:15

综合案例——选项卡

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简化后代码：

var oTab = document.getElementById("table");var oLis = oTab.getElementsByTagName("li");var oDivs = oTab.getElementsByTagName("div");for(var i=0;i<oLis.length;i++){    var oLi=oLis[i];    oLi.newIndex=i;    oLi.onmouseover()=function () {        for(var j=0;j<oLis.length;j++){            oLis[j].className="";            oDivs[j].className="";        }        this.className="select";        oDivs[this.newIndex].className="select"    }}

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

阅读全文

0 0