                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

借用別人的代碼實現一個效果

<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>無標題文檔</title>
<style?type="text/css">
*{
???????margin:?0;
???????padding:?0;
???}
???#par_div{
???????margin-left:?200px;
???????margin-top:?200px;
???????float:?left;
???????height:?200px;
???????width:?320px;
???}
???.list{
???????height:?42px;
???????width:?320px;
	???margin-left:?1px;
???}
.list?li{
???list-style-type:?none;
???width:?60px;
???height:?40px;
???line-height:?40px;
???text-align:?center;
???display:?inline-block;
???float:?left;
???border-left:?1px?solid?#336699;
???border-right:?1px?solid?#336699;
???border-top:?1px?solid?#336699;
???margin-left:?-1px;
}
.list?li?a{
???text-decoration:?none;
???color:?darkgray;
???display:?block;
}
div#news1?{
????margin-top:?-2px;
????z-index:?-1;
}
.news{
???clear:?both;
???line-height:?25px;
???height:?158px;
???width:?320px;
???border:1px?solid?#336699;
???padding:?5px;
}
#new3,#news2{
???display:?none;
}
</style>

</head>

<body>
<div?id="par_div">
???<ul?class="list">
???????<li><a?href="#">房產</a></li>
???????<li><a?href="#">家居</a></li>
???????<li><a?href="#">二手房</a></li>
???</ul>
???<div?class="news"?id="news1">
???????<p>275萬購昌平鄰鐵三居?總價20萬買一居</p>
???????<p>200萬內購五環三居?140萬安家東三環</p>
???????<p>北京首現零首付樓盤?53萬購東5環50平</p>
???????<p>京樓盤直降5000?中信府?公園樓王現房</p>
???</div>
???<div?class="news"?id="news2">
???????<p>40平出租屋大改造?美少女的混搭小窩</p>
???????<p>經典清新簡歐愛家?90平老房煥發新生</p>
???????<p>新中式的酷色溫情?66平撞色活潑家居</p>
???????<p>瓷磚就像選好老婆?衛生間煙道的設計</p>
???</div>
???<div?class="news"?id="new3">
???????<p>275萬購昌平鄰鐵三居?總價20萬買一居</p>
???????<p>200萬內購五環三居?140萬安家東三環</p>
???????<p>北京首現零首付樓盤?53萬購東5環50平</p>
???????<p>京樓盤直降5000?中信府?公園樓王現房</p>
</div>
</div>
</body>
</html>

怎么添加上js，讓效果變成點擊房產的時候顯示房產的內容，點擊家居的時候顯示家居的內容呢

清水流

2017-12-13

源自：JavaScript進階篇 6-3

關注問題我要回答

986

操作

收起

2 回答

RLeaner 回答被采納 +2 積分
2017-12-14

//多看看javascript入門篇3-5display屬性；
//可以給分別a標簽添加一個點擊函數；
<a?onclick="house()"?href="#">房產</a>
<a?onclick="home()"?href="#">家居</a>
<a?onclick="hdshome()"?href="#">二手房</a>

<script?type=text/javascript>
function?house()
	{
		document.getElementById("news1").style.display?=?"block";
		document.getElementById("news2").style.display?=?"none";
		document.getElementById("new3").style.display?=?"none";
		
	}
	function?home()
	{
		document.getElementById("news1").style.display?=?"none";
		document.getElementById("news2").style.display?=?"block";
		document.getElementById("new3").style.display?=?"none";
	}
	function?hdshome()
	{
		document.getElementById("news2").style.display?=?"none";
		document.getElementById("new3").style.display?=?"block";
		document.getElementById("news1").style.display?=?"none";
	}
</script>

//不知道這是不是你想要的

1 回復有任何疑惑可以回復我~

收起回答

清水流提問者

非常感謝！

2017-12-22 回復有任何疑惑可以回復我~

阿旗_健身狂人

第三個函數的代碼有錯誤我改了一下 function hdshome(){ document.getElementById("news1").style.display="none"; document.getElementById("news2").style.display="none"; document.getElementById("new3").style.display="block"; }

2018-06-11 回復有任何疑惑可以回復我~