JavaScript + jQueryで作るタブ切り替えコントロール

タブ部分へのクリックイベント登録

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
タブ部分をクリックした時に、特定の動作を起こさせるイベント登録の方法について解説致します。
講師:
07:02

字幕

このレッスンでは これまでのレッスンに引き続き JavaScript と jQuery を使って タブ切り替えコントロールを 実装するにあたり タブ部分へのクリックイベントの 登録方法について解説します まずダウンロードしてきたこちらの tab_event というフォルダの中にある― こちらの3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンを進めて行きます 早速レッスンを始めていきましょう 今回クリックイベントを登録する場所ですが HTML で言うと こちらのタブ部分となります 更に細かく見てみると こちらの「タブA」 「タブB」 「タブC」を囲っている― こちらの a タグ この部分に クリックイベントを登録したいと思います ところでこのクリックイベントですが 簡単に言うとこの a タグを クリックした時に 特定の処理を JavaScript で 実行する為の方法です 通常 a タグで囲まれたこの「タブA」と いう文字をクリックすると 外部のサイトに飛んだりページ内の 特定の場所に飛んだりしますが 今回はこの JavaScript で イベント登録することによって そのデフォルトの動作を無効化して 今回で言うとタブ切り替えの動作を 実装していく1番初めの処理となります では早速実際に書いて行きましょう こちらの javascript.js を開いて下さい 今このような状態になっているかと 思いますので この alert の部分を消しておきましょう そして少し改行を空けておきます まずはクリックイベントを登録したい 要素を指定します ここではこのように書いていきます まず $ ( ) そしてこの ( ) の中に ' ' もしくは " " を書いて下さい そして更にこの ' ' の中に ul そしてid を表す # そして tab ですね これで id="tab" といった 属性のついた ul タグ― という意味になります そしてこの ul 要素の中にある a 要素 このような形で指定します 一度 HTML ファイルを見てみましょう id="tab" という値をもった― ul タグですね こちらの中にある a タグということで この3つを指し示していることになります では JavaScript に戻ります ここからクリックイベントを登録していきます まず . (ドット) そして on と書きます そして ( ) そしてこの中にイベントの種類を書きます 今回はクリックしたらタブを切り替えると いうような形なので ここには click と書きます そして , (カンマ) そしてその後に function ( ) の { } と書いて 最後に ; と打ちます 次に今度はクリックされたときに 発動する命令を書いていきます その命令はこちらの { } の間に 書いて行きます それではここを改行して 空けておいて ここにはまずこのように書いておきます $ の ( ) の this と書いて . (ドット) そして blur と書いて ( ) の ; そして更に一行空けて 最後にこちらに return false と書いて ; (セミコロン) このように書くことで この a タグをクリックした時の デフォルトの動作つまりは リンク先に飛ぶといった動作を 無効化することができます 因みにこの blur の部分ですが この部分はクリックした時に その a タグにあてられるフォーカス自体を 外してしまうという意味になります 最後にこちらの部分に 実際の動作を書いていきます 本来であればここにタブを切り替える プログラムを書いていきますが 今回はこのクリックイベントがきちんと 動作するかどうかを確認したい為に alert ( ) の ; (セミコロン) そしてこの中に「テスト」 と 打っておきましょう ではこの状態で JavaScript のファイルを 保存して下さい そして index.html こちらをブラウザで確認してみましょう こちらのファイルをブラウザで開いてみます するとこのような画面になりましたね ではこちらのタブ部分を クリックしてみましょう するとこのように「テスト」と出てきましたね もちろん先程の return false で 元々の動作 要するにリンク先に飛ぶという動作は 無効化されているので 別のページに飛んだりなどは しないようになっています 他にもこちらをクリックすると このように「テスト」 そしてこちらも「テスト」 と出てきますね ではエディターに戻ります このように書くことで タブメニュー部分のクリックイベントの 登録が完了しました あとは実際にこちらの部分に タブを切り替えるプログラムを 書いていくだけですね 以上でレッスンは終了です 今回は JavaScript と jQuery を使って タブ切り替えコントロールを 実装するにあたっての― タブ部分へのクリックイベントの 登録方法について解説しました 以降のレッスンではクリックして 選択したタブを 選択状態のデザインに切り替える 方法について解説して行きますので そちらも合わせて参考にしてみて下さい

JavaScript + jQueryで作るタブ切り替えコントロール

タブ切り替えコントロールとは、Webページ上でタブをクリックして表示しているコンテンツを切り替える機能のことです。このコースではJavaScriptとjQueryを利用して、タブ切り替えコントロールをサイトに実装する方法について解説します。このコースを見れば、JavaScriptやjQueryの基本についても同時に習得することができます。

59分 (11 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年08月30日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。