为什么无法我的代码无法实现？-慕课网

为什么无法我的代码无法实现？

来源：10-1 编程挑战

慕粉4094316

2016-11-15 07:58

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     *{
         padding:0;margin:0;color:#000;
         }
      ul{list-style-type: none;}
     a{text-decoration: none;}
     #tab-list{
         height:400px;
         border:1px solid blue;
         width:400px;
         margin-top:30px;

     }
     #ul1{
          list-style:none; display:block; height:50px; line-height:50px;
          overflow:hidden;
}
     #ul1 li{
        display:inline-block; float:left;border:1px solid #8e8e8e;margin:0 auto;width:60px;height:30px;text-indent:10px;margin-left:20px;margin-top:10px; overflow:hidden;line-height:30px;
     }

#tab-list div{
      height:200px;
      width:300px;border-left:1px solid pink;
      border-right:1px solid pink;
      border-bottom:1px solid pink;
      border-top:none;
      line-height:40px;margin-left:18px;
      margin-bottom:30px;margin-top:-10px;
}
.on{
      display:block;
}
.hide{
      display:none;
}
   #ul1 li:hover{color:blue;}
     #ul1 li.active{border-top:-20px solid red;border-bottom:2px solid #FFFFFF;}


    </style>
    <script type="text/javascript">

    window.onload=function(){
        var Oul=document.getElementById("ul1");
         var Oli=Oul.getElementsByTagName("li");
          var list=document.getElementById("tab-list");
          var odiv=list.getElementsByTagName("div");

       for(var i=0;i<Oli.length;i++){
        oLi[i].index=i;
        oLi[i].onclick=function(){
            for(var j=0;j<Oli.length;j++){
               Oli[j].className="";
                odiv[j].className="hide";
            }
            this.className="on";
           odiv[this.index].className="";
        }
    }
}
    </script>

</head>
<body>


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

</body>
</html>

写回答关注

2回答

GdinKing

2016-11-15 16:23:56

已采纳

window.onload=function(){
var Oul=document.getElementById("ul1");
var Oli=Oul.getElementsByTagName("li");
var list=document.getElementById("tab-list");
var odiv=list.getElementsByTagName("div");
var index = 0;
for(var i=0;i<Oli.length;i++){
if(i==0){
odiv[i].className="on";
}else{
odiv[i].className="hide";
}
Oli[i].index=i;
Oli[i].onclick = function(e){
for(var j=0;j<Oli.length;j++){
Oli[j].className="";
odiv[j].className="hide";
}
odiv[this.index].className="on";
this.className="";
}
}
}

0 0
慕粉3746264

2016-11-15 16:20:12

不说样式只说点击效果的话你把下面的两个div先加上class="hide"; js代码里面第一个for循环里面的变量名大小写要区分那两个oLi要换成Oli

0 1

JavaScript进阶篇

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

468781 学习 · 22507 问题

查看课程

相似问题

代码为什么无法实现

回答 1

我的代码无法实现删除

回答 3

请问为什么无法实现？

回答 3

为什么我的代码无法输出？？？？

回答 1

9-4 全选为什么无法实现

回答 2

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