제목대로

HTTP 통신을 하지 않고, 웹 페이지를 전환하는 방법을 익혀서 공유합니다.
html은 haml로 기입하고 있으므로 잘 부탁드립니다.

결론으로서는 아직 표시시키고 싶지 않은 페이지에는 대원의 class에 display:none을 맞춘다

먼저 필요한 웹 페이지의 html 코드를 하나의 html 파일에 모두 내보냅니다. 그리고, 최초로 표시되지 않는 페이지의 대원의 클래스에 display:none이 맞는 클래스를 줍니다. 아래 코드에서 .yabai는 해당 클래스가됩니다.
아래 코드와 이미지를 보세요
* copipe 할 때 코드에서 코멘트 아웃을 지워주세요.

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クラス를 주고,
두 번째 페이지에서 yabaiクラス를 제거하는 방법으로 구현합니다.
구체적인 코드는 다음과 같습니다.

jquery

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

이 방법으로 하나의 URL에서 페이지 전환할 수 있습니다!

계속

jquery로 HTTP 통신을하지 않는 페이지 전환 여러 페이지 버전