Question

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>

あなたがうまくいけば、可能であればフェード遷移のいくつかの種類と、その場所を取るDIV消えますつまり、「挿入コインをクリック」をクリックして.replaced-withを作るとき、私はそれをみたいです。これをどうやって行うのですか？

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