单击时使用另一个div替换div
单击时使用另一个div替换div
提问于 2017-03-01 03:55:10
我对javascript的了解几乎为零，我正在尝试让一个div在单击时被另一个div替换。
<div class='replace-on-click'>
<h1><a href="#">Click to Insert Coin</a></h1>
<div class='replaced-with'>
<div class='info-text'>
<h1>Title</h1>
<h2>Subtitles</h2>
</div>
<ul class='info-buttons'>
<li><a href='#' class='b1'>Buy Tickets</a></li>
<li><a href='#' class='b2'>Find Hotels</a></li>
</ul>
</div>
</div>
我希望当你点击“点击插入硬币”时，它将消失，并使.replaced-with div取而代之，如果可能的话，希望有某种淡入淡出的过渡。我该怎么做呢？
回答 1
Stack Overflow用户
发布于 2017-03-01 07:42:07
我们将使用jQuery，因为它可以帮助我们在几个语句中完成所需的行为。因此，首先将jQuery包含在文档头部某处。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>然后在某个地方包含这个Javascript代码(例如，创建index.js并像库代码一样包含它)。
$(document).ready(function() {
$('h1').click(function() {
$(this).fadeOut(function() {
$('.replaced-with').fadeIn();
});
});
});它执行以下操作:当文档准备就绪时，它在h1上添加一个等待单击的事件处理程序。单击时，它首先淡出h1，当它完成时，它会淡入另一个元素。
在HTML文档中，将hidden属性包含在最初应隐藏的对象中。
<div class='replaced-with' hidden>在这里你也可以找到它的工作原理：http://jsbin.com/cuqoquyeli/edit?html,js,console,output
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42517610
复制相关文章
相似问题
腾讯云开发者
