首頁猿問我設置的，顯示和隱藏，點擊沒用，想...

我設置的，顯示和隱藏，點擊沒用，想知道為啥？

JavaScript

慕雪1032536 2016-07-11 11:33:53

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

2 反對回復 2016-07-11

nickylau82

TA貢獻128條經驗獲得超67個贊

大致看了看，題主的問題有三個：

全局變量是個很不好的習慣。建議不要隨隨便便設置全局變量。
題主沒搞清楚基本原理。<a>標簽的工作流程是這樣的，先執行你的onclick事件，然后跳轉到href指定的url地址。
由于設置了href屬性，但是沒有賦值，就會默認跳轉到當前頁面。也就是說如果題主在調試工具中打個斷點，會發現其實是執行了display:none這個動作的。但是，因為馬上又跳轉到這個頁面，也就是相當于回到初始狀態了，所以感覺上是沒有刷新
有兩個辦法。一個是?<li><a href="#" onClick="h();">隱藏</a></li>?
另外一個是?

1 反對回復 2016-07-11

echo_kinchao

TA貢獻600條經驗獲得超86個贊

你的觸發結構不是你想要的那個所以沒有成功

反對回復 2016-07-12

qyy2499760117_葉子

TA貢獻188條經驗獲得超91個贊

執行是有用的，他是一閃而過，那是因為

<li><a href="" onClick="h()">隱藏</a></li>?

這兩句里的href=""的引號里沒有#，應改成

<li><a href="#" onClick="h()">隱藏</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>

反對回復 2016-07-11

5 回答
0 關注
2185 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

我設置的，顯示和隱藏，點擊沒用，想知道為啥？

我設置的，顯示和隱藏，點擊沒用，想知道為啥？

5 回答

添加回答

我設置的，顯示和隱藏，點擊沒用，想知道為啥？

我設置的，顯示和隱藏，點擊沒用，想知道為啥？