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

タブの選択に連動したコンテンツ部分の切り替え実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
それぞれのタブをクリックした際に、それに紐付けられたコンテンツを表示し、それ以外を非表示にする方法について、解説致します。
講師:
08:13

字幕

このレッスンでは これまでのレッスンに引き続き JavaScript と jQuery を使って タブ切り替えコントロールを 実装するにあたり それぞれのタブをクリックした際に それに紐付けされたコンテンツを 表示する方法について解説します まずダウンロードしてきたこの content_switch のフォルダの中にある― この3つのファイルを エディタで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンを進めて行きます 早速レッスンを始めていきましょう さてこれまでのレッスンの中で このタブ部分と このコンテンツ部分それぞれを 紐付けさせる所までやってきましたね 今回はその紐付けされたタブとコンテンツ それぞれを連動させてタブをクリックしたら それに応じたコンテンツを 表示させるようにしたいと思います では こちらの javascript.js を開きます このタブ選択状態を変更する こちらのプログラムの下に 新たに今回の処理を付け加えて行きます では早速書いていきましょう まずは前回のレッスンでタブとコンテンツの 紐付けを行いましたね タブの href の中にコンテンツの p タグの id の名前を入れました まずはそれを取得する所からやってみましょう それをするにはどのように書くか 実際にこのように書いて行きます まずは変数を定義します var そして変数の名前を書きます ここでは target としておきましょう そして = そしてこの後に href 属性を取得する プログラムを書きます それはこのように書いて行きます まずは $ そして ( ) そしてここには this と入れます その後に . そして attr そして ( ) の ; まずこの this はこの a タグですね タブの a タグ その中のクリックされたそのものを指します そしてこちらの attr は attribute の略です この this で表された a タグの中にある― 今回はこちらの attr の引数の中に 属性の値を取得してくる際に利用します 取得したい属性 href を入れておきます こうすることによりこの変数 target には クリックされた a タグの href の値が 入ってくることになります では この変数 target の中に入っている 値を使って 該当するコンテンツを 表示するプログラムを書きます まずは $ そして ( ) そしてこの ( ) の中には先程の変数 target を書きます そしてそのまま表示する show を書いて ( ) の ; と書きます 前回のレッスンでこちらの href 属性の値の 頭に # をつけましたね 勿論この変数 target の中にはその頭に # がついた値が入っている訳ですが こちらのこの部分 こちらに変数 target を入れることによって 頭の # が id を指し示すこととなり そのままいわゆるセレクタとして 利用できるわけです ですので p タグに設定された id の名前と一致するわけですね その一致した要素を show 要するに 表示する といった命令になります では 一度この状態で このファイルを保存します そして この index.hitml をブラウザで 確認してみましょう こちらのファイルをブラウザで開きます するとこのような画面になりましたね 早速こちらのタブをクリックしてみましょう すると このようにタブBのコンテンツが 表示されてきましたね こちらのタブCもクリックしましょう すると 更にこちらにも タブCのコンテンツが表示されてきました ただ この状態だとタブBやタブAの 値がそのまま残ってしまっていますね このままだとタブ切り替えにならないので このタブをクリックした際に そのタブに紐付けされたコンテンツ以外は 隠すようにしてみましょう ではエディタに戻ります 先程このように記述した部分ですね この記述した上にこのように書いて行きます $ ( ) そしてこの ( ) の中には div#content そしてその直下にある p この後に . hide ( ) ; と書きます このように書くことで div id content の― 直下にある p タグの全てを隠す という意味になります 一度 index.html に戻ってみましょう こちらで HTML ソースを確認してみると div id content の中には 3つの p タグがありましたね これを一度全て非表示にするという命令です そしてその後に 例えばタブBをクリックしたならば この href ですね こちらの値に合致する― こちらの p タグ これだけを表示する という命令にしているわけです では JavaScript に戻ります では この状態でファイルを保存して index.html をブラウザで開いてみましょう これを開きます すると このように表示されましたね ではクリックしてみましょう このようにタブBをクリックすると タブBのコンテンツが出てきます そして タブCをクリックすると タブCのコンテンツが出てきました そしてタブA こちらもタブAのコンテンツが 出てきましたね これでタブ切り替えコントロールの実装は 完了となります ではエディタに戻ります 以上でレッスンは終了です 今回は JavaScript と jQuery を使って タブ切り替えコントロールを 実装するにあたって それぞれのタブをクリックした際に それに紐付けされたコンテンツを 表示する方法について解説しました このレッスンを持ちまして JavaScript と jQuery を利用した― タブ切り替えコントロールの実装は完了です この基本的は方法をマスターしておくと 様々なデザインやレイアウトのタブ切り替え コントロールに応用できるようになりますので しっかりとマスターしておきましょう

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

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

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

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

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

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