jqueryでHTTP通信をしないページ遷移

タイトル通り

HTTP通信を行わずに、webページを遷移する方法を身につけたので共有します。
htmlはhamlで記入しているのでよろしくお願いします。

##結論としてはまだ表示させたくないページには大元のclassにdisplay:noneを当てる
まずは、必要なwebページのhtmlコードを一つのhtmlファイルに全て書き出します。そして、最初に表示されないページの大元のクラスにdisplay:noneが当たるクラスを与えます。下のコードでは.yabaiがそのクラスになります
以下のコードと画像を見てください
*コピペする時はコード中のコメントアウトを消してください

haml

.zyuuhati
  .keikoku-box
    %P.top-keikoku
      = fa_icon 'venus-mars'
      %span 警告！
    %p.keikoku-bunsyo 当サイトは18歳以下の利用を固く禁じます。あなたは18歳以上ですか?
    %a.ryoukai はい //このボタンを押すとページが切り替わります
    %a.nigeru いいえ
 
.waller.yabai　//.yabaiにはdisplay:noneがかかっているので最初は見えません
  %P.yabababa まじ卍字

css

.zyuuhati{
 background-color: gray;
 height: 100%
 padding :15% 15%;

}
.keikoku-box{
  background-color: #fba933;
  height: 100%;
  width: 100%;
  padding: 20% 10% 10% 10%;
}

.top-keikoku{
  text-align: center;
  font-size: 30px;
  font-weight: 200;
  color: red;
}

.keikoku-bunsyo{
  margin-top: 70px;
  font-size:25px;
  color: black;
}

.ryoukai{
  display: block;
  text-align: center;
  border-radius: 20%;
  line-height: 40px;
  width: 200px;
  height: 40px;
  background-color: aqua;
  font-size: 20px;
  margin: 20px auto;
  color: white;
}

.nigeru{
  display: block;
  text-align: center;
  border-radius: 20%;
  line-height: 40px;
  width: 200px;
  height: 40px;
  background-color: red;
  font-size: 20px;
  margin: 20px auto;
  color: white;
}
.yabai{
  display: none;
}

.waller{
  background-color: #ef5185;
  height: 700px;
 
}

.yabababa{
  color: white;
  font-size: 50px;
}

「はい」のリンクをクリックした瞬間、一つ目のページが消え、二つ目のページが現れましたね。
このからくりは、「はい」のクリックを発火点にして、1枚目のページのクラスにyabaiクラスを与え、
2枚目のページからyabaiクラスを取り除くという方法で実装しています。
具体的なコードは以下の通りです。

jquery

$(function(){
  $('.ryoukai').on('click', function(e){
    e.preventDefault();
    $('.zyuuhati').addClass('yabai'); //最初の画面をdisplay:noneにします。
    $('.waller').removeClass('yabai'); //次のページを表示させます
  });
});

この方法で一つのURL上でページ遷移することができます！

続き

jqueryでHTTP通信をしないページ遷移　複数ページ版