猿问

为什么我的无法实现选项卡切换,大神给看看

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
    ul,li,div{margin:0;
    padding:0;
        }
        a{
            text-decoration:none;
            color:black;
            border:1px solid ;
            padding:5px;
        }
        ul{
            list-style:none;
            
            
        }
        li{margin:10px;
            display:inline;
            font-weight:bold;
            font-size:20px;
        }
      div{width:200px;
      height:180px;
      border:1px solid rgb(100,200,150);
      padding-right:40px;
      padding-left:10px;
      margin:10px;
               } 
      #box1{
          
      }
      #box2{
         display:none;
      }
      #box3{
          
         display:none;
      }
       
    </style>
    <script type="text/javascript">
         
    // JS实现选项卡切换
    function a(b){
        switch(b.innerHTML){
            case "房产":var c=document.getElementById("box2");
                  var d=document.getElementById("box3");
                  var e=document.getElementById("box1");
                  c.style.display="none";
                  d.style.display="none";
                  e.style.display="block"
                  break
            case "家居":var c=document.getElementById("box1");
                  var d=document.getElementById("box3");
                  var e=document.getElementById("box2");
                  c.style.display="none";
                  d.style.display="none";
                  e.style.display="block"
                  break
            case "二手房":var c=document.getElementById("box1");
                  var d=document.getElementById("box2");
                  var e=document.getElementById("box3");
                  c.style.display="none";
                  d.style.display="none";
                  e.style.display="block"
                  break
        }
    }
    
    </script>
 
</head>
<body>
<!-- HTML页面布局 -->
<ul >
<li><a href="javascript:a(this);">房产</a></li>
<li><a href="javascript:a(this);">家居</a></li>
<li><a href="javascript:a(this);">二手房</a></li>
    
</ul>
<div id="box1">275万购昌平邻铁三居 总价20万买一居
     200万内购五环三居 140万安家东三环
     北京首现零首付楼盘 53万购东5环50平
     京楼盘直降5000 中信府 公园楼王现房</div>
<div id="box2">40平出租屋大改造 美少女的混搭小窝
      经典清新简欧爱家 90平老房焕发新生
      新中式的酷色温情 66平撞色活泼家居
      瓷砖就像选好老婆 卫生间烟道的设计</div>
<div id="box3">通州豪华3居260万 二环稀缺2居250w甩
      西3环通透2居290万 130万2居限量抢购
      黄城根小学学区仅260万 121平70万抛!
      独家别墅280万 苏州桥2居优惠价248万</div>
 
</body>
</html>


qq_安仁斗辣椒_0
浏览 1372回答 2
2回答

chenjs

嗯,大家一起加油
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答