我设置的，显示和隐藏，点击没用，想知道为啥？

5回答

业余奶茶品鉴师

<!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>  <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><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>