JavaScriptで画面表示をパカパカ切り替えるボタン

クリックするごとに付随するコンテンツをパカパカ切り替えるJavaScriptです。

コンテンツの情報量が少なければサイドバーメニューなどに使えるし、大きく作ればアプリの画面切り替えボタンなどにも良さそうです。

チャームポイントを挙げると、「現在表示してるほうの切り替えボタン」を無効っぽくしています。

JavaScriptで書いていますが、必要に応じてjQueryから使うと便利かも。

ボタンを押すごとに表示コンテンツを切り替える

サイドバーのメニューや、アプリケーション用の画面切り替えボタンにもなる表示切り替え機能を作ります。

デモ

見た方が早いと思うのでまずはデモから。display A / display B を押すと、交互にパカパカ表示が変わります。

• display A
• display B

HTML

【HTML】
<ul id="switch">
<li id="a">display A</li>
<li id="b">display B</li>
</ul>
 
<div id="divA">contentA A A A A A A A</div>
<div id="divB">contentB B B B B B B B</div>


ボタン部分だけでなく、コンテンツ部分もデータ量に応じてリストで管理すると対応が判りやすいかも知れません。

JavaScript

【JavaScript】
function clickSwitch() {
  'use strict';
  var isA = 0; // 現在地判定
  var btnA = document.getElementById('a');
  var btnB = document.getElementById('b');
  var divA = document.getElementById('divA');
  var divB = document.getElementById('divB');
 
  function setState(isA) {
    btnA.className = (isA == 0) ? 'btn inactive' : 'btn'; // Aのとき非表示
    divA.className = (isA == 0) ? 'boxDisplay' : 'boxNone'; // Aのとき表示
    btnB.className = (isA == 1) ? 'btn inactive' : 'btn'; // Bのとき非表示
    divB.className = (isA == 1) ? 'boxDisplay' : 'boxNone'; // Bのとき表示
  }
  setState(0);
 
  btnA.addEventListener('click', function(){
    if (isA == 0) return;
    isA = 0;
    setState(0);
  });
  btnB.addEventListener('click', function(){
    if (isA == 1) return;
    isA = 1;
    setState(1);
  });
};
document.addEventListener("DOMContentLoaded", clickSwitch, false);


現在のステータスを見ながら、ボタンが押せる状態の時はコンテンツを非表示に、ボタンを押したあとはコンテンツを表示します。

CSS

【CSS】
#switch {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  }
.btn {
  float: left;
  width: 200px;
  margin: 0 0 2rem 10px;
  padding: 5px;
  font-size: 1.6rem;
  text-align: center;
  background: #CCC;
  color: #FFF;
  border-bottom: 4px solid rgba(0, 0, 0, .2);
  }
.btn:hover {
  opacity: .8;
  cursor: pointer;
  }
.inactive { opacity: .5; }
.inactive:hover {
  opacity: .5;
  cursor: default;
  }
.boxDisplay { display: block; }
.boxNone { display: none; }


JavaScript部分とセットで縁の下の力持ちなスタイルシート。

表示非表示部分はJavaScriptを使わずにCSSで処理してます。

画面切り替え処理の覚え書き

処理に関する備忘録をまとめておきます。

2画面による切り替えをするとき

サンプルコードでは拡張性から現在地判定 isA を 0/1 でやってますが、2画面決め打ちなら true/false にしたほうが素直かも。

var isA = false;

ここで最初に真偽値を設定した場合は、条件判定が「isA」か「そうじゃないか」に書き換えるとスッキリします。


if (isA) {}; // 現在表示中のコンテンツがAのとき
if (!isA) {}; // 現在表示中のコンテンツがBのとき


あえてjQueryを使う

サンプルコードは見ての通り普通のJavaScriptですが、動かそうと思っている場所で既にjQueryを入れてる場合はjQueryを挟むという手もあります。

DOM構築待ちしなくていいし、DOMContentLoadedもいらなくなるし、関数名を考える必要もなくなりますし。( ◜ᴗ◝ )

jQuery経由で使う場合は、サンプルコードの1行目とラスト2行を書き換えて下さい。他の記述は一緒です。jQuery構文じゃなくても普通に動きます。

【jQuery】
$(function() {
// 中身は全部一緒です
});


WordPressで動かないときは…

あとWordPressなどの人で、jQuery入れてるはずなのに動かない場合は「プログラムの読み込み順」を見直して下さい。

たとえばjQueryをフッタに突っ込んでる場合は、上の方に書いても当然動きません。ご注意くださいませ。