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

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

ruirui_1996

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

阅读量279

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ruirui_1996/article/details/77899075

版权

JavaScript 专栏收录该内容

21 篇文章 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简化后代码：

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属性

ruirui_1996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一周、课时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">
复制链接

扫一扫