对内容切换的函数实现过程不理解。虚心求解答，谢谢！-慕课网

对内容切换的函数实现过程不理解。虚心求解答，谢谢！

来源：10-1 编程挑战

鲜花牛奶

2017-07-24 13:57

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
   *{padding:0px;margin:0px;font:12px normal "microsoft yahei";}
    #tabs {margin: 20px;padding: 5px;height: 150px;width: 290px;}
    #tabs ul{line-height: 30px;display: block;height: 30px;border-bottom: 2px saddlebrown solid;list-style: none;}
    #tabs ul li {line-height: 28px;background: #fff;text-align: center;display: inline-block;float: left;height: 28px;width: 60px;margin: 0px 3px;border:1px solid #aaa;border-bottom: none;list-style: none;cursor: pointer;}
    #tabs ul li.on {border-top: 2px solid saddlebrown;border-bottom: 2px solid #fff;}
    #tabs div {line-height: 25px;height: 120px;border:1px solid #336699;border-top:none;padding:5px;}
    .hide {display: none;}
    </style>
    <script type="text/javascript">
       window.onload=function(){
        var oTab=document.getElementById("tabs");
        var oUl=oTab.getElementsByTagName("ul")[0];
        var oLis=oUl.getElementsByTagName("li");
        var oDivs=oTab.getElementsByTagName("div");
        for(var i=0,len=oLis.length;i<len;i++){
            oLis[i].index=i;
            oLis[i].onclick=function(){
                for(var n=0;n<len;n++){
                    oLis[n].className="";
                    oDivs[n].className="hide";//当点击每个<li>时，所有<li>元素的类名为空，<div>元素的类名为隐藏，
                }
            this.className="on";//这个地方理解为：点击某个<li>，就将"on"赋给这个<li>,然后调用类名为"on"的标签，页面布局中只有第一个<li>的class为"on"

oDivs[this.index].className="";//赋值""是没有class属性的意思还是别的意思。承上，当前对象调用无类名的<div>标签。当i=0时，oLis[0].className="on"，oDivs[0]无类名；当i=1时，oLis[1]没有类名，但this.className="on"，所以又去调用oLis[0]的内容吗？同样oDivs[1].className=""和第二个div标签<div class="hide">之间是怎么联系的。总之对内容切换的实现过程不理解。
            }
        };
    }

    </script>

</head>
<body>

<div id="tabs">
    <ul>
        <li class="on">房产</li>//只有第一个<li>的class为"on"
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>//第一个<div>无class属性
     275万购昌平邻铁三居总价20万买一居<br>
    200万内购五环三居 140万安家东三环<br>
    北京首现零首付楼盘 53万购东5环50平<br>
    京楼盘直降5000 中信府公园楼王现房<br>
    </div>
    <div class="hide">//第二第三个<div>均为隐藏属性
     40平出租屋大改造美少女的混搭小窝<br>
    经典清新简欧爱家 90平老房焕发新生<br>
    新中式的酷色温情 66平撞色活泼家居<br>
    瓷砖就像选好老婆卫生间烟道的设计<br>
    </div>
    <div class="hide">
     通州豪华3居260万二环稀缺2居250w甩<br>
    西3环通透2居290万 130万2居限量抢购<br>
    黄城根小学学区仅260万 121平70万抛!<br>
    独家别墅280万苏州桥2居优惠价248万<br>
    </div>
</div>
</body>
</html>

写回答关注

5回答

Nika_: 2017-07-27 06:55:45

已采纳

对内容切换不理解啊，我先简单的讲一下思路

首先是页面的初始化，最开始的时候第一个LI标签需要添加on样式，显示第一个div（即不给它添加hide样式，使其样式为空），其它div添加hide样式让其隐藏，其它LI不添加on样式让其处于未点击状态

我把你不懂的那块代码标注了下，你看看

        for(var i=0,len=oLis.length;i<len;i++){//通过循环为所有的LI绑定点击事件
            oLis[i].index=i;//添加index属性，方便后期找到当前点击LI对应的DIV，为其去除hide样式，即将其className赋值为空
            oLis[i].onclick=function(){//循换绑定点击事件
                for(var n=0;n<len;n++){//通过循环将所有的li的className赋值为空，即所有的LI皆是未点击的样式，所有的DIV的className为hide样式，即所有DIV都隐藏
                    oLis[n].className="";
                    oDivs[n].className="hide";
                }
            this.className="on";   //通过this获取到当前点击的LI，将其className赋值为on，即让当前点击的LI显示其应有的点击样式
           oDivs[this.index].className=""; //通过循环体内第一条语句存储的index值，找到当前点击LI对应的DIV，去除原有的hide样式，让其显示
            }
        };

2 3

杰帅musi...

厉害厉害把我的困惑也搞明白了兄弟

2018-07-24 10:28:04

共 2 条回复 >

tqz啊

2017-08-02 21:46:03

脚本代码只处理“房产”、“家居”、“二手房”，三个选项。每点击一个选项，代码就为每个选项设置CSS样式，过程是：先获取当前选项序号，再对每个选项添加css样式以及DIV（div的添加来自之前记录的序号）。

1 0

鲜花牛奶

嗯，已经明白了，谢谢

2017-08-02 22:46:59

共 1 条回复 >
我要SSR

2017-07-25 15:07:56

你这没理解ｔｈｉｓ指的是哪个对象。这里ｔｈｉｓ是当你点击哪个ｌｉ的时候他就指向哪个ｌｉ。点击第一个ｌｉ(i = 0时)，首先全部ｌｉ的类名都为空，然后第一个ｌｉ添加一个类名＂ｏｎ＂，点第二个li(i = 1时)也是让类名为空，然后再给第二个li添加类名“ｏｎ”。第三个同理。其实第二句话也是这么个意思，先让所有div添加类名“hide”隐藏起来，然后点击li时，让该类名为空，使div不再隐藏。就是这么个意思

0 0

鲜花牛奶: 2017-07-25 14:32:50

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
    *{padding:0px;margin:0px;font:12px normal "microsoft yahei";}
    #tabs {margin: 20px;padding: 5px;height: 150px;width: 290px;}
    #tabs ul{line-height: 30px;display: block;height: 30px;border-bottom: 2px saddlebrown solid;list-style: none;}
    #tabs ul li {line-height: 28px;background: #fff;text-align: center;display: inline-block;float: left;height: 28px;width: 60px;margin: 0px 3px;border:1px solid #aaa;border-bottom: none;list-style: none;cursor: pointer;}
    #tabs ul li.on {border-top: 2px solid saddlebrown;border-bottom: 2px solid #fff;}
    #tabs div {line-height: 25px;height: 120px;border:1px solid #336699;border-top:none;padding:5px;}
    .hide {display: none;}
    </style>
    <script type="text/javascript">
       window.onload=function(){
        var oTab=document.getElementById("tabs");
        var oUl=oTab.getElementsByTagName("ul")[0];
        var oLis=oUl.getElementsByTagName("li");
        var oDivs=oTab.getElementsByTagName("div");
        for(var i=0,len=oLis.length;i<len;i++){
            oLis[i].index=i;
            oLis[i].onclick=function(){
                for(var n=0;n<len;n++){
                    oLis[n].className="";
                    oDivs[n].className="hide";
                }
            this.className="on";
            oDivs[this.index].className="";
            }
        };
    }
    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
    <ul>
        <li>房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
     275万购昌平邻铁三居 总价20万买一居<br>
    200万内购五环三居 140万安家东三环<br>
    北京首现零首付楼盘 53万购东5环50平<br>
    京楼盘直降5000 中信府 公园楼王现房<br>
    </div>
    <div>
     40平出租屋大改造 美少女的混搭小窝<br>
    经典清新简欧爱家 90平老房焕发新生<br>
    新中式的酷色温情 66平撞色活泼家居<br>
    瓷砖就像选好老婆 卫生间烟道的设计<br>
    </div>
    <div>
     通州豪华3居260万 二环稀缺2居250w甩<br>
    西3环通透2居290万 130万2居限量抢购<br>
    黄城根小学学区仅260万 121平70万抛!<br>
    独家别墅280万 苏州桥2居优惠价248万<br>
    </div>
</div>
</body>
</html>

4 0

鲜花牛奶回复Nika_

谢谢谢谢，问题中改了一下描述

2017-07-26 15:39:53

共 4 条回复 >