JavaScript/Jquery-隐藏显示的div,显示另一个,然后重复
我想在页面加载时显示id为houseImages的div,同时隐藏div landImages、renovationImages、UpcomingImages和voteForNext。单击“景观美化”后,我想显示div landImages和隐藏div house图像。显然,我希望此功能在列表中继续,当我单击“绘制”时,该div将重新出现。我将如何使用JavaScript实现这一点 以下是我到目前为止的情况:JavaScript/Jquery-隐藏显示的div,显示另一个,然后重复,javascript,jquery,html,hide,show,Javascript,Jquery,Html,Hide,Show,我想在页面加载时显示id为houseImages的div,同时隐藏div landImages、renovationImages、UpcomingImages和voteForNext。单击“景观美化”后,我想显示div landImages和隐藏div house图像。显然,我希望此功能在列表中继续,当我单击“绘制”时,该div将重新出现。我将如何使用JavaScript实现这一点 以下是我到目前为止的情况: <Div id="mainContent"> &l
<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>
我建议将您的姓名更改为您要显示的div的ID。然后,您可以执行以下操作:
$("#columnleft li a").click(function(e) {
e.preventDefault();
$("columnright div").hide();
$("#"+$(this).attr("href")).show();
});
我个人喜欢隐藏->法登效果的组合。如果您有2个按钮和2个div,您可以切换显示哪一个按钮,如下所示: HTML: JS: 请参阅JSFIDLE:
您可以将此方法附加到使用jQuery捕获的任何事件,并显示/隐藏和div。您可能需要查看jQuery。它使这样的任务变得非常简单。对于开发来说非常陌生,所以还没有尝试过很多,我如何使用jquery实现它?下面有人回答说使用jquery,您可以在标题中包含一个链接到jquery的标记。上面解释得很好。所以绘画是正确的吗?@James No。你可以更改中的href。如果我可以使用hrefs单击,我可以使用这种方法吗?是的,有点不错。没有必要将hrefs与此一起使用。你仍然可以使用
<div id="a">div 1</div>
<div id="b">div 2</div>
<button id="c">show div 1</button>
<button id="d">show div 2</button>
div{
width: 200px;
height: 200px;
border: solid 1px;
display: none;
}
$('#c').click(function() {
$('#b').hide();
$('#a').fadeIn();
});
$('#d').click(function() {
$('#a').hide();
$('#b').fadeIn();
});