今さら聞けない! ビギナーのためのJavaScript講座(2) タブ切り替えで、JavaScriptの基本を学ぶ(2) ページ遷移の停止、クラスの削除

前回の説明で、jQueryを使ったJavaScriptのコーディングがどんなものなのかは、なんとなくご理解いただけたのではないでしょうか。今回は、引き続きタブ切り替え処理を実装しながら、もう少し踏み込んで解説していきましょう。

なお、HTMLは以下のとおりです。

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>タブ切り替えUI</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
 </head>

 <body>

  <!-- 以下、タブの部分 -->
  <ul class="tab_nav">
   <li><a href="#tab_1">社会</a></li>
   <li><a href="#tab_2">経済</a></li>
   <li><a href="#tab_3">スポーツ</a></li>
  </ul>
  <!-- タブの部分ここまで -->

  <!-- ここから内容表示 -->

  <div id="tabs">

   <div id="tab_1" class="archives show">   <!--   showクラスがここだけ付いていることに注目  -->
    <h2>社会に関する記事</h2>
    <ul>
     <li><a href="#">社会の記事1</a></li>
     <li><a href="#">社会の記事2</a></li>
     <li><a href="#">社会の記事3</a></li>
     <li><a href="#">社会の記事4</a></li>
     <li><a href="#">社会の記事5</a></li>
    </ul>
   </div><!-- /.tab_1 -->

   <div id="tab_2" class="archives">
    <h2>経済に関する記事</h2>
    <ul>
     <li><a href="#">経済の記事1</a></li>
     <li><a href="#">経済の記事2</a></li>
     <li><a href="#">経済の記事3</a></li>
     <li><a href="#">経済の記事4</a></li>
     <li><a href="#">経済の記事5</a></li>
    </ul>
   </div><!-- /.tab_2 -->

   <div id="tab_3" class="archives">
    <h2>スポーツに関する記事</h2>
    <ul>
     <li><a href="#">スポーツの記事1</a></li>
     <li><a href="#">スポーツの記事2</a></li>
     <li><a href="#">スポーツの記事3</a></li>
     <li><a href="#">スポーツの記事4</a></li>
     <li><a href="#">スポーツの記事5</a></li>
    </ul>
   </div><!-- /.tab_3 -->

  </div><!-- /#tabs -->

  <!-- 内容表示ここまで -->

  <!-- JavaScriptはbody終了タグの直上に配置します -->
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="js/tabnav_ex01.js"></script>
 </body>
</html>

サンプルプログラムをこちらからダウンロードすることも可能です。

クリック後の処理を書いてみよう

通常aタグは、クリックしたらhref属性に書かれたURLに飛んでいきますよね? したがって、前回のコードのままでは基本的にタブ切り替えではなく、画面遷移することになります(URLは「#tab_1」などが付いたものになります)。

見た目はそれほど変わらないが、厳密にはページ遷移している

今回のサンプルプログラムでは、このままでも差し支えありませんが、これから色々なWebアプリケーションを作るなかでは、aタグが押されても画面が切り替わることを強制的にストップさせなければならないこともあるかもしれません。

そこで、ページ遷移を停める方法を示しておきましょう。JavaScriptのコードは以下のようになります。

tabnav_ex01.js

$(".tab_nav a").click( tabClicked );


function tabClicked (e) {
    //ここにクリックされたときの処理を書きます
    e.preventDefault();
}

e.preventDefault()を記述することで、「e」(つまりクリックされた情報)のpreventDefaultという命令を呼び出し、ページ遷移を強制的に止めています。

#tab_1が付いていない。遷移が停止していることがわかる

該当のdivタグにクラスをつける

ここまでで、「タブがクリックされたらどう処理する?」という部分についてはおわかりいただけたと思います。ただし、現在のコードでは、「どのタブがクリックされたの?」という情報については全く把握できません。

続いては、これをfunction内で判定する方法を学習しましょう。

そのためにjsファイルを以下のように書き換えます。

tabnav_ex01.js

$(".tab_nav a").click( tabClicked );


function tabClicked (e) {
    //ここにクリックされたときの処理を書きます
    e.preventDefault();
    alert(e.target.innerText)
}

複数あるタブのうち、どれがクリックされたかを調べるにはtargetを使うのが最適です。

e.targetとありますが、これは「e」(クリックされた情報)の中の「target」を意味しています。このtargetとはクリックされた対象となるものです。すなわち、e.targetでどのaタグが押されたかがわかります。

さらに、ドットに続けてinnerTextと書いてあります。これにより、タグの中の文字列を取得することが可能です。

実行してみましょう。

「経済」タブをクリックしたら「経済」の文字が表示された

おさらいすると、e.target.innerTextにより、「どのaタグがクリックされたか?」をtargetで調べて、その該当するtarget(つまりaタグ)の中の文字(つまりinnerText)を取得することができます。

以上により、クリックされたaタグ内の文字を取得する方法も身につけられました。

href属性の値を抜き取る

ここでもう一度、JavaScriptの処理のしくみを思い出してみましょう。

【JavaScriptの処理のしくみ】

aタグがクリックされたら…
aタグなのでURLが切り替わるが、それを強制的に停止させる
押されたaタグのhref属性の値を抜き取る(つまり「#tab_1」～「#tab_3」)
すべてのdiv要素から「show」クラスを削除する
そのid名を持つdivタグのid名を探して「show」クラスをつける

ここまでで私たちは2まで習得できたということになります。

続いては、3のhref属性の値の取得です。

押されたaタグのhrefを抜き取りたいのですが、それにはjQueryのattr()という便利な機能を使いましょう。

tabnav_ex01.js

$(".tab_nav a").click( tabClicked );


function tabClicked (e) {
    //ここにクリックされたときの処理を書きます
    e.preventDefault();
    alert( $(e.target).attr("href") );
}

「経済」タブをクリックしたら「#tab_2」と表示された

これはクリックされたaタグのhref属性の値を調べたことになります、「社会」なら「#tab_1」、「経済」なら「#tab_2」、「スポーツ」なら「#tab_3」といったかたちになります。

すべてのdiv要素から「show」クラス

次は、上記4の「すべてのdiv要素から『show』クラスを削除する」です。

JavaScriptでは、要素に特定のクラス名を付けたり消したりできます、これは非常に重要なので憶えておきましょう。

対象の要素.addClass("show") : 対象の要素にshowというクラス名をつける
対象の要素.removeClass("show") : 対象の要素からshowというクラス名を削除する

この操作ができれば、あとはCSSでshowが付いている状態とそうでない状態の見た目を切り分けたらいいわけです。

以下が完成のJavaScriptです、取得したid名をid_nameに入れておき、最終行のaddClassするところで使いましょう。なお、変数を使う時にはvarを宣言しておきましょう。

tabnav_ex01.js

$(".tab_nav a").click( tabClicked );
function tabClicked (e) {


 e.preventDefault();


 // タブの対象となるid名を抜き取って変数「id_name」にいれておく
 var id_name = $(e.target).attr("href");


 // .archives全てのクラスからshowクラスを削除する
 $(".archives").removeClass("show");


 // クリックされたタブ対象のid名を持ったdiv要素にshowクラスをつける
 // div.show状態になった要素はCSSに記載されたdisplay: blockが適用されて表示される
 $(id_name).addClass("show");


}

実行してタブをクリックし、動作を確認してみてください。

今回のポイント

タブ切り替えなど、表示/非表示を切り替えるUIはJavaScriptとCSSのコンビネーションが欠かせません。

今回はshowクラスが付いているdivの指定がCSSに記述されています。注目してほしいのは以下の部分です。

.archives {
  display: none; // 通常は表示されていない
}


#tabs .show {
  display: block; // showが付けられたので表示する
}

タブの切り替えは、JavaScriptでクラスを付け替えて、CSSでクラスの状態により表示/非表示を切り分けるという方法がもっとも効率的だと言えます。

次回は、クリックされたタブにも色を付けること、そしてただ一瞬で切り替わるのではなく、これをもとにフワッと切り替わるエフェクトを多少付けてみることにしましょう。

サンプルプログラム : ex01.zip

執筆者紹介

秋葉秀樹(AKIBA Hideki) - フリーランスデザイナー/株式会社インヴォーグ外部CTO兼テクニカルアドバイザー

DTP/グラフィックデザイン/Webフロントエンド全般/Flashゲーム開発/3DCGモデリング/Webディレクターを経て現職。主な作品としては、海遊館やサンシャイン水族館に公認されたAndroid/iPhoneアプリ「Ikesu」がある。

「Ikesu」は、NFC技術を水族館で利用した世界初の事例。魚をスマートフォン内に持ち帰られる体験を提供し、各IT系メディア、新聞、大阪市のWebサイトなどでも取り上げられている。

現在はデザイナー向けの講演活動に加え、Adobe認定校などにてトレーナー活動、またMdN Design Interactive、WebDesigning他、寄稿など執筆多数行っている。

HTML5を使ったデザイナー向けのWebアプリ「Grad3」を開発。多くのWebデザイナーに「便利で使いやすい」と好評を博している。