Question

我对javascript的了解几乎没有，我试图让div替换为另一个div。

＆＃13;

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

＆＃13;

我喜欢它，所以当你点击＆＃34;点击插入硬币＆＃34;时，它会消失并使.replaced-with div取代它，希望有一些淡入淡出过渡可能。我该怎么做呢？

Answer 1

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

单击时将div替换为另一个div

1 个答案: