为什么效果出不来

来源:3-1 js实现自动切换实现

慕数据1727510

2018-08-01 14:21

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */  
       #head{
           width:300px; height:150px; magin:10px; border:1px solid #eee;
       }
       #tt{ background:#f7f7f7; height:30px; margin:0; padding:0; position:relative;
       }
   #tt ul{margin:0; padding:0; list-style-type: none;left:-1px;  width:302px;
 
   }
 #tt ul li{ float:left; width:100px; text-align:center; border-bottom:1px solid #eee;

 
 }
 #tt ul li a{ text-decoration: none;
              line-height:30px;
              color:#000;
 }
 #tt ul li a:hover{color:red;}
 #tt li.select{ background:#fff; border-bottom:1px solid #fff;
 border-left:1px solid #eee; border-right:1px solid #eee; padding:0;
 }
#mod{ padding:10px 10px}
    </style>
    <script type="text/javascript">
         
    // JS实现选项卡切换

     window.onload=function(){
        
        var tab=document.getElementById('tt');
        var Oli= tab.getElementsByTagName('li');
        var divs=tab.getElementsByTagName('div');
        var index=0;
        var timer=null;
        timer=setInterval(function(){
            index++;
            if(index >= Oli.length){
                index=0;
            }
        
           for(var j=0;j<Oli.lenght;j++){
               Oli[j].className='';
              divs[j].style.display="none";
           }
            Oli[index].className='select';
           divs[index].style.display='block';
          
        },2000);
        
    }

    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<div id="head" class="notice">
<div id="tt" class="tt">
    <ul>
        <li class="select"><a href="#">房产</a></li>
         <li><a href="#">家居</a></li>
          <li><a href="#">二手房</a></li>
    </ul>

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

写回答 关注

1回答

  • 读东读西
    2018-08-04 00:03:18
    已采纳

     for(var j=0;j<Oli.lenght;j++){
                   Oli[j].className='';
                  divs[j].style.display="none";
               }


    这里 

    Oli[j].className='';
    // ''是空, 你写的是 “ 吧


    慕数据172...

    非常感谢!

    2018-08-06 11:46:50

    共 1 条回复 >

Tab选项卡切换效果

本课程详细介绍网页页面中最流行常用的tab切换效果

65466 学习 · 573 问题

查看课程

相似问题