用另一个点击替换div
问题描述:
我对javascript的知识接近于零,我试图用另一个div点击替换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
格取代其位置,希望以某种可能的话淡出过渡。我如何去做这件事?
答
我们将使用jQuery,因为它可以帮助我们在几条语句中完成所需的行为。所以首先在你的HTML文档头部的某个地方包含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文档中,将隐藏属性添加到最初应该隐藏的对象中。
<div class='replaced-with' hidden>
在这里,你可以找到它的工作还有:http://jsbin.com/cuqoquyeli/edit?html,js,console,output
使用jQuery显示()和隐藏()。你可以设置这些时间看起来像他们是动画http://api.jquery.com/show/我会建议添加一个js文件,选择你的h1元素,并点击,隐藏它,并显示其他:$ (h1).on(“click”,function(){$(。replace-on-click).hide(); $(。replaced-with).show()});'请认识到上面的例子,你应该只使用'h1' –
来限制选择器的范围。你可以用['document.querySelector']获取元素(https://developer.mozilla.org/en-US/docs/Web/API/Document/ querySelector)或['document.querySelectorAll'](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) - 你可以添加事件侦听器['addEventListener'](https ://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)用于'click'事件。 MDN是一个很好的资源。你的意图是用vanilla JavaScript(没有库)来完成这个任务吗? –
我对JS的了解还不足以理解现在。 JS库也很好。 – user2444211