为什么我的无法实现选项卡切换，大神给看看
<!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