我设置的，显示和隐藏，点击没用，想知道为啥？
<!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>
慕雪10325365回答
-
业余奶茶品鉴师
<!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
大致看了看，题主的问题有三个：全局变量是个很不好的习惯。建议不要随随便便设置全局变量。题主没搞清楚基本原理。<a>标签的工作流程是这样的，先执行你的onclick事件，然后跳转到href指定的url地址。由于设置了href属性，但是没有赋值，就会默认跳转到当前页面。也就是说如果题主在调试工具中打个断点，会发现其实是执行了display:none这个动作的。但是，因为马上又跳转到这个页面，也就是相当于回到初始状态了，所以感觉上是没有刷新有两个办法。一个是 <li><a href="#" onClick="h();">隐藏</a></li> 另外一个是 <li><a href="" onClick="h();return false;">隐藏</a></li> -
echo_kinchao
你的触发结构 不是你想要的那个 所以没有成功 -
qyy2499760117_叶子
执行是有用的，他是一闪而过，那是因为<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>
随时随地看视频慕课网APP
相关分类
JavaScript