JavaScriptでコンテンツ切り替え-Idea to Code-

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

JavaScript

JavaScriptでコンテンツ切り替え2015/11/16

JavaScriptでページ内容を切り替えてみた。

hideクラスでdisplay:noneスタイルを適用して非表示にしている。

hideクラスを付けたり取ったりすることで表示・非表示を切り替えている。

表示状態はpage変数で管理している。

page変数を内部で保持するためにクロージャを使っている。

※要jQuery

【動作確認】

1つ目のコンテンツ

p1p1p1p1p1p1p1

HTML.txt HTML.txt

<div id="p1">
  <p>1つ目のコンテンツ</p>
  <p>p1p1p1p1p1p1p1</p>
</div>
<div id="p2" class="hide">
  <p>2つ目のコンテンツ</p>
  <p>p2p2p2p2p2p2p2p2</p>
</div>
<div id="p3" class="hide">
  <p>3つ目のコンテンツ</p>
  <p>p3p3p3p3p3p3p3p3</p>
</div>
<br>
<input type="button" value="切り替え" id="changeButton" />

hide.css hide.css

.hide {
  display : none;
}

change.js

$(function(){
  $("#changeButton").click(
    (function(){
      var page = 1;
      return function(){
        if(page == 1){
          $("#p1").addClass("hide");
          $("#p2").removeClass("hide");
          page = 2;
        }else if(page == 2){
          $("#p2").addClass("hide");
          $("#p3").removeClass("hide");
          page = 3;
        }else {
          $("#p3").addClass("hide");
          $("#p1").removeClass("hide");
          page = 1;
        }
      }
    })()
  );
});