jQueryを少しだけ使って「簡単に画面を切り替える」

はじめに

今回は、他のページに遷移するわけではなく、１ページの中で画面が切り替わったように見せる方法です!
jQueryのhide()とshow()を使います!
短いコードでできるので使ってみてください!
[デモ]

イメージしやすいよう、
「input要素に入力された値を、ボタンがクリックされたら次のページに表示する。」という形にしていますが、そこのコードは無視して頂いて大丈夫です!

1:htmlの用意

このコードでは、最初の画面をinput_area、
切り替え後の画面をoutput_areaとしています。

  <div class="input_area" id="input_area">
    <h1>最初の画面</h1>
    <input type="text" class="input" id="input">
    <button id = "btn">登録</button>
  </div>

  <div class="output_area" id="output_area">
    <h1>切り替え後の画面</h1>
    <p>この下に入力結果を表示</p>
    <p class="output_text" id="output_text"></p>
  </div>

この時点では、下記のように1画面に「両方の画面」が表示されている状態です。

2:cssで切り替え後の画面を非表示にしておく

output_areaに下記のcssを適応させて、ただ単に「切り替え後の画面(output_area)」を非表示にします!

.output_area{
  display: none;
}

3: jQueryで、最初の画面の非表示と、切り替え後の画面の表示

ボタンが押されたら、「input_areaを非表示に」し、
「output_areaを表示させる　」という処理を書きます。

<script>
  
  $("#btn").on("click", function(){  //ボタンがクリックされたら下記の処理を実行
    let text = $("#input").val();   //ここは無しで大丈夫です
    $("#output_text").text(text);   //ここは無しで大丈夫です
    $("#input_area").hide(); //最初の画面を非表示にする
    $("#output_area").show(); //次の画面を表示する
  });

</script>

.hide()で「表示されている要素」を「非表示」にします。
.show()で「非表示になっている要素」を「表示」します。

これで完成です!

4:まとめ

この方法でしたら、1画面で見た目上画面が切り替わっているだけので、ページ間でのデータのやりとり等も考えなくで良いので、シンプルでいいなーと思っています!
どなたかの参考になれば幸いです。

[twitter] https://mobile.twitter.com/tatsuki_kt