为什么点击以后没有切换啊
精慕门8363187
2017-10-24 20:42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
li{ background:#fff;
cursor:pointer;
border: 2px solid gray;
float:left;
height:28px;
line-height:28px;
list-style:none;
margin:0 10px;
padding:0 5px;
position:relative;
left:40%;
}
ul{ display:block;
height:30px;
line-height:30px;
border-bottom:2px saddlebrown solid;
}
.hide{
display:none;
}
.show{
display:block;
width:300px;
margin:0 38%;
text-align:center;
line-height:25px;
border:2px solid red;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
function monfocus1(){
var fi=getElementById("first");
var sec=getElementById("second");
var thi=getElementById("third");
fi.className="show";
sec.className="hide";
thi.className="hide";
}
function monfocus2(){
var fi=getElementById("first");
var sec=getElementById("second");
var thi=getElementById("third");
fi.className="hide";
sec.className="show";
thi.className="hide";
}
function monfocus3(){
var fi=getElementById("first");
var sec=getElementById("second");
var thi=getElementById("third");
fi.className="hide";
sec.className="hide";
thi.className="show";
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<ul>
<li onClick="monfocus1()">房产</li>
<li onClick="monfocus2()">家居</li>
<li onClick="monfocus3()">二手房</li>
</ul>
<div id="first">
275万购昌平邻铁三居 总价20万买一居<br/>
200万内购五环三居 140万安家东三环<br/>
北京首现零首付楼盘 53万购东5环50平<br/>
京楼盘直降5000 中信府 公园楼王现房<br/>
</div>
<div id="second">
40平出租屋大改造 美少女的混搭小窝<br />
经典清新简欧爱家 90平老房焕发新生<br />
新中式的酷色温情 66平撞色活泼家居<br />
瓷砖就像选好老婆 卫生间烟道的设计<br />
</div>
<div id="third">
通州豪华3居260万 二环稀缺2居250w甩<br />
西3环通透2居290万 130万2居限量抢购<br />
黄城根小学学区仅260万 121平70万抛!<br />
独家别墅280万 苏州桥2居优惠价248万<br />
</div>
</body>
</html>
2回答
-
- 蚂蚁_0014
- 2017-10-30 22:55:04
1.把你的js代码放到</body>标签前。2.使用window.onload();造成这种问题的原因是浏览器自上而下进行渲染，执行。js代码执行时元素还没加载
-
- 恩桐
- 2017-10-24 23:14:38
是 document.getElementById() 你漏了document.
JavaScript进阶篇
468195 学习 · 21891 问题
相似问题