为什么这样写选项卡的内容一闪就过了，然后一直显示第一个选项卡的内容？
来源：10-1 编程挑战
vivian爱南开
2015-05-29 11:19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
margin:0 auto;
padding:0 10px;
width:400px;
}
.clear{
clear:both;
}
#list{
width:90%;
height:38px;
}
ul{
list-style:none;
}
li{
width:70px;
float:left;
padding:5px;
margin:5px 40px 0 -35px;
border:1px solid #69F;
border-bottom:none;
text-align:center;
}
a{
text-decoration:none;
}
#content{
border:1px solid #69F;
padding:0 10px;
width:100%;
border-top:#C03 2px solid;
}
p{
width:auto;
margin-right:70px;
}
.hide{
display:none;
}
.show{
display:block;
}
</style>
</head>
<body>
<div id="list">
<ul>
<li><a href="" name="p1" >房产</a></li>
<li><a href="" name="p2" >家居</a></li>
<li><a href="" name="p3" >二手房</a></li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p id="p1">
275万购昌平邻铁三居 总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府 公园楼王现房
</p>
<p id="p2" class="hide">
40平出租屋大改造 美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆 卫生间烟道的设计
</p>
<p id="p3" class="hide">
通州豪华3居260万 二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万 苏州桥2居优惠价248万
</p>
</div>
<script type="text/javascript">
function showCont(){
var list = document.getElementsByTagName("a");
for(var i=0;i<list.length;i++){
list[i].onmouseover=function(){
this.parentNode.style.borderTop="2px solid #C03";
}
list[i].onmouseout=function(){
this.parentNode.style.borderTop="1px solid #69F"
}
list[i].onclick=function(){
var para = document.getElementsByTagName("p");
for(var j=0;j<para.length;j++){
if(para[j].getAttribute("id")!=this.getAttribute("name")){
para[j].className="hide";
}else{
para[j].className="show";
}
}
}
}
}
window.onload=showCont;
</script>
</body>
</html>
写回答
关注
1回答
-
- 钱湛
- 2015-05-29 14:53:36
因为你的
<li><a href="" name="p1" >房产</a></li>
<li><a href="" name="p2" >家居</a></li>
<li><a href="" name="p3" >二手房</a></li>
这三行的href属性是空的，你一点那个选项卡浏览器会刷新页面的，所以怎么样都会是第一页。
正常做法是把href里面写#，这样就不会刷新页面了；
比如：
<li><a href="#" name="p3" >二手房</a></li>
JavaScript进阶篇
本课程从如何插入JS代码开始，带您进入网页动态交互世界
469071 学习 · 22582 问题
相似问题