用另一個點擊替換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

回答

相關問題