仅供参考，不会可以问，看到会答-慕课网

仅供参考，不会可以问，看到会答

来源：10-1 编程挑战

瑞吉自闭了

2019-03-17 19:08

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 400px;
            margin: auto;
        }
        #nav{
            height: 30px;
            width: 400px;
            border-bottom: 1px solid gray;
            display: block;
            border-left: 1px solid gray;
        }
        #nav li{
            float: left;
            padding: 0 30px;
            border: 1px solid gray;
            border-bottom: none;
            border-left: none;
            line-height: 29px;
            cursor: pointer;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #section li{
            border: 1px solid gray;
            padding: 20px;
            height: 300px;
            border-top: none;
            display: none;
        }
        #nav li.current{
            background-color: #bebebe;
            height: 30px;
        }
        #section li.current{
            display: block;
        }


    </style>
</head>
<body>





<div class="box">
    <div id="nav">
        <ul>
            <li class="current">房产</li>
            <li>家居</li>
            <li>二手房</li>
        </ul>

    </div>

    <div id="section">
        <ul>
            <li class="current">

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

        </ul>

    </div>
</div>


<script>
    window.onload = function(){
        var nav=document.getElementById("nav");
        var navLi=nav.getElementsByTagName("li");
        var section=document.getElementById("section");
        var sectionLi=section.getElementsByTagName("li");
        for(var i=0;i<navLi.length;i++){
            navLi[i].index=i;
            navLi[i].onclick=function(){
                for(var n =0;n<navLi.length;n++){
                    navLi[n].className="";
                    sectionLi[n].className="li";
                }
                this.className="current";
                sectionLi[this.index].className="current";
            }
        }
    }
</script>
</body>
</html>

写回答关注

2回答

慕斯卡3374434: 2019-05-29 10:41:03

for(var n =0;n<navLi.length;n++){
        navLi[n].className="";
        sectionLi[n].className="li";
}
请问这几行是什么意思 这里有点看不明白

0 0

瑞吉自闭了

2019-03-17 19:10:57

在我写的时候发现document.getElementsByClassName()这个方法不可用，所以只能把nav和section改为id属性，没有调试出来为什么。其他没有什么大问题

0 0

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468060 学习 · 21891 问题

查看课程

相似问题

仅供参考！

回答 2

仅供参考：

回答 2

仅供参考。

回答 1

仅供参考！

回答 1

仅供参考！

回答 1

打开慕课网App查看更多内容