<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> ul{list-style:none;}a{text-decoration:none;display:block;height:30px;line-height:30px;width:60px;background:#ccc;text-align:center;float:left;margin-left:1px;}a:hover{background:#FF3;}.public-header{width:100%;background:#F09;} #head1{background:#3F3;width:400px;border:#000 1px solid;clear:both;} </style> <script type="text/javascript"> var x=document.getElementById("head1");function h(){x.style.display="none";}function s(){x.style.display="block";} </script> </head><body><!-- HTML页面布局 --> <div> <ul> <li><a href="" onClick="h()">隐藏</a></li> <li><a href="" onClick="s()">显示</a></li> </ul> </div> <div id="head1"> <ul> <li>275万购昌平邻铁三居 总价20万买一居</li> <li>200万内购五环三居 140万安家东三环</li> <li>北京首现零首付楼盘 53万购东5环50平</li> <li>京楼盘直降5000 中信府 公园楼王现房</li> </ul> </div></body></html>
5 回答
已采纳
业余奶茶品鉴师
TA贡献260条经验 获得超388个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
ul{list-style:none;}
a{text-decoration:none;
display:block;
height:30px;
line-height:30px;
width:60px;
background:#ccc;
text-align:center;
float:left;
margin-left:1px;}
a:hover{
background:#FF3;}
.public-header{
width:100%;
background:#F09;
}
#head1{
background:#3F3;
width:400px;
border:#000 1px solid;
clear:both;
}
</style>
</head>
<body>
<!-- HTML页面布局 -->
<div>
<ul>
<li><a onClick="h()">隐藏</a></li>
<li><a onClick="s()">显示</a></li>
</ul>
</div>
<div id="head1">
<ul>
<li>275万购昌平邻铁三居 总价20万买一居</li>
<li>200万内购五环三居 140万安家东三环</li>
<li>北京首现零首付楼盘 53万购东5环50平</li>
<li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
</div>
</body>
<script type="text/javascript">
var x=document.getElementById("head1");
function h(){
x.style.display="none";
}
function s(){
x.style.display="block";
}
</script>
</html>
nickylau82
TA贡献128条经验 获得超67个赞
大致看了看，题主的问题有三个：
全局变量是个很不好的习惯。建议不要随随便便设置全局变量。
题主没搞清楚基本原理。<a>标签的工作流程是这样的，先执行你的onclick事件，然后跳转到href指定的url地址。
由于设置了href属性，但是没有赋值，就会默认跳转到当前页面。也就是说如果题主在调试工具中打个断点，会发现其实是执行了display:none这个动作的。但是，因为马上又跳转到这个页面，也就是相当于回到初始状态了，所以感觉上是没有刷新
有两个办法。一个是 <li><a href="#" onClick="h();">隐藏</a></li>
- 另外一个是
qyy2499760117_叶子
TA贡献188条经验 获得超91个赞
执行是有用的，他是一闪而过，那是因为
<li><a href="" onClick="h()">隐藏</a></li>
<li><a href="" onClick="s()">显示</a></li>
这两句里的href=""的引号里没有#，应改成
<li><a href="#" onClick="h()">隐藏</a></li>
<li><a href="#" onClick="s()">显示</a></li>
记住了，以后用到<a>标签，没有链接的话，最好加个#号的，js要放在内容后面
你试一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
ul{list-style:none;}
a{text-decoration:none;
display:block;
height:30px;
line-height:30px;
width:60px;
background:#ccc;
text-align:center;
float:left;
margin-left:1px;}
a:hover{
background:#FF3;}
.public-header{
width:100%;
background:#F09;
}
#head1{
background:#3F3;
width:400px;
border:#000 1px solid;
clear:both;
}
</style>
</head>
<body>
<!-- HTML页面布局 -->
<div>
<ul>
<li><a href="#" onClick="h()">隐藏</a></li>
<li><a href="#" onClick="s()">显示</a></li>
</ul>
</div>
<div id="head1">
<ul>
<li>275万购昌平邻铁三居 总价20万买一居</li>
<li>200万内购五环三居 140万安家东三环</li>
<li>北京首现零首付楼盘 53万购东5环50平</li>
<li>京楼盘直降5000 中信府 公园楼王现房</li>
</ul>
</div>
<script type="text/javascript">
var x=document.getElementById("head1");
function h(){
x.style.display="none";
}
function s(){
x.style.display="block";
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消