我想在页面加载时显示一个 id 为“houseImages”的 div,同时隐藏 div“landImages”、“renovationImages”、“UpcomingImages”和“voteForNext”。单击“美化”后,我想显示 div“landImages”并隐藏 div“houseImages”。显然,我希望此功能继续通过列表,当我单击“绘画”时,该 div 会重新出现。我将如何使用 JavaScript 做到这一点?
这是我到目前为止所拥有的:
<Div id="mainContent">
<h2> Our House </h2>
<div id="columnLeft">
<ul>
<li id="leftColumnPainting">
<a href="#houseImages">Painting</a>
</li>
<li id="leftColumnLandscaping">
<a href="landscaping.html">Landscaping</a>
</li>
<li id="leftColumnRenovations">
<a href="renovations.html">Renovations</a>
</li>
<li id="leftColumnUpcoming">
<a href="upcoming.html">Upcoming</a>
</li>
<li id="leftColumnNext">
<a href="whatsnext.html">Vote for <br>Next!</br></a>
</li>
</ul>
</div>
<div id="columnRight">
<div id="title">
<p> Over the course of a couple years we have done a number of projects around the house. Click on a link to your left to see the improvements! Don't forget to vote for what's next!
</p>
</div>
<div id="houseImages">
<ul>
<li>
<a href="Painting.html"><img src="./img/house1.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/house2.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/house3.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/house4.jpg" /></a>
</li>
</ul>
</div>
<div id="landImages">
<ul>
<li>
<a href="Painting.html"><img src="./img/land1.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/land2.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/land3.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/land4.jpg" /></a>
</li>
</ul>
</div>
<div id="renovationImages">
<ul>
<li>
<a href="Painting.html"><img src="./img/renovation1.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/renovation2.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/renovation3.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/renovation4.jpg" /></a>
</li>
</ul>
</div>
<div id="upcomingImages">
<ul>
<li>
<a href="Painting.html"><img src="./img/upcoming1.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/upcoming2.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/upcoming3.jpg" /></a>
</li>
<li>
<a href="Painting.html"><img src="./img/renovation4.jpg" /></a>
</li>
</ul>
</div>
<div id="voteForNext">
<p> enter in voting form here</p>
</div>
</div>
</Div>