首頁(yè) 猿問(wèn) 我設(shè)置的，顯示和隱藏，點(diǎn)擊沒(méi)用，想...

我設(shè)置的，顯示和隱藏，點(diǎn)擊沒(méi)用，想知道為啥？

JavaScript

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

<!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title>實(shí)踐題 - 選項(xiàng)卡</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萬(wàn)購(gòu)昌平鄰鐵三居總價(jià)20萬(wàn)買一居</li>? ? ? ? ? ? <li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</li>? ? ? ? ? ? <li>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</li>? ? ? ? ? ? <li>京樓盤直降5000 中信府公園樓王現(xiàn)房</li>? ? ? ? </ul>? ? </div></body></html>

查看完整描述

5 回答

已采納

業(yè)余奶茶品鑒師

TA貢獻(xiàn)260條經(jīng)驗(yàn) 獲得超388個(gè)贊

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實(shí)踐題?-?選項(xiàng)卡</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頁(yè)面布局?-->
<div>
????<ul>
????????<li><a?onClick="h()">隱藏</a></li>
????????<li><a?onClick="s()">顯示</a></li>
????</ul>
</div>
<div?id="head1">
????<ul>
????????<li>275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居</li>
????????<li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居?140萬(wàn)安家東三環(huán)</li>
????????<li>北京首現(xiàn)零首付樓盤?53萬(wàn)購(gòu)東5環(huán)50平</li>
????????<li>京樓盤直降5000?中信府?公園樓王現(xiàn)房</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 反對(duì) 回復(fù) 2016-07-11

nickylau82

TA貢獻(xiàn)128條經(jīng)驗(yàn) 獲得超67個(gè)贊

大致看了看，題主的問(wèn)題有三個(gè)：

全局變量是個(gè)很不好的習(xí)慣。建議不要隨隨便便設(shè)置全局變量。
題主沒(méi)搞清楚基本原理。<a>標(biāo)簽的工作流程是這樣的，先執(zhí)行你的onclick事件，然后跳轉(zhuǎn)到href指定的url地址。
由于設(shè)置了href屬性，但是沒(méi)有賦值，就會(huì)默認(rèn)跳轉(zhuǎn)到當(dāng)前頁(yè)面。也就是說(shuō)如果題主在調(diào)試工具中打個(gè)斷點(diǎn)，會(huì)發(fā)現(xiàn)其實(shí)是執(zhí)行了display:none這個(gè)動(dòng)作的。但是，因?yàn)轳R上又跳轉(zhuǎn)到這個(gè)頁(yè)面，也就是相當(dāng)于回到初始狀態(tài)了，所以感覺(jué)上是沒(méi)有刷新
有兩個(gè)辦法。一個(gè)是?<li><a href="#" onClick="h();">隱藏</a></li>?
另外一個(gè)是?

1 反對(duì) 回復(fù) 2016-07-11

echo_kinchao

TA貢獻(xiàn)600條經(jīng)驗(yàn) 獲得超86個(gè)贊

你的觸發(fā)結(jié)構(gòu) 不是你想要的那個(gè) 所以沒(méi)有成功

反對(duì) 回復(fù) 2016-07-12

qyy2499760117_葉子

TA貢獻(xiàn)188條經(jīng)驗(yàn) 獲得超91個(gè)贊

執(zhí)行是有用的，他是一閃而過(guò)，那是因?yàn)?/p>

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

這兩句里的href=""的引號(hào)里沒(méi)有#，應(yīng)改成

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

記住了，以后用到<a>標(biāo)簽，沒(méi)有鏈接的話，最好加個(gè)#號(hào)的，js要放在內(nèi)容后面

你試一下

<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title>實(shí)踐題 - 選項(xiàng)卡</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萬(wàn)購(gòu)昌平鄰鐵三居總價(jià)20萬(wàn)買一居</li>
? ? ? ?<li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</li>
? ? ? ?<li>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</li>
? ? ? ?<li>京樓盤直降5000 中信府公園樓王現(xiàn)房</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>