用另一个点击替换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格取代其位置，希望以某种可能的话淡出过渡。我如何去做这件事？

来源

2017-02-28 user2444211

使用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

我们将使用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

来源

2017-02-28 23:42:07

用另一个点击替换div

回答

相关问题