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

タブとコンテンツ部分の紐付け

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
それぞれのタブとそれに対応するコンテンツ部分の紐付け方について解説致します。
講師:
04:28

字幕

このレッスンでは これまでのレッスンに引き続き JavaScript と jQuery を使って タブ切り替えコントールを 実装するにあたり それぞれのタブと それに対応するコンテンツ部分を 紐づける方法について解説いたします まずはダウンロードしてきた こちらの linkage というフォルダの中にある この3つのファイルを エディタで開いてください そしてこれが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンを進めていきたいと思います それでは早速レッスンを始めていきましょう これまでのレッスンで 3つのタブメニューを作成し そしてそれに対応する 3つのコンテンツ部分を作ってきました このレッスンでは 例えばこの タブ A というメニューを クリックしたときに こちらのタブ A に応じた コンテンツが表示されるよう 具体的にそれぞれ紐付けをしていきます もちろんこちらのタブ B をクリックすれば こちらのタブ B のコンテンツを表示して そしてタブ C をクリックしたら こちらのタブ C を表示できるようにします この紐付けの方法はいろいろありますが― 今回は直感的で分かりやすい方法を 取りたいと思います 具体的にはこちら タブメニューの部分の この a タグの href 属性 こちら現在は何も指定していない状態ですが こちらにターゲットとなる コンテンツを指定していくことで それに応じたコンテンツの切替を できるようにしていきます それでは具体的にどのようにやるか 今回はこの href のこちらの中に この対応するコンテンツ部分の p タグの中にある この id 属性の名前を こちらに入れてあげます それでは早速やってみます このタブ A に該当するものは こちらのid content_A ですね ですのでこちらをコピーして そして href の中にペーストします そしてペーストしたら こちらの content_A の頭に ページ内リンクを作成するような要領で 頭に # を付けます そしてこちらのタブ B の方も 同様に こちらの p タグの id content_B の部分をコピーしてきます そして href の中にペースト そして頭に # を付けます タブ C も同じですね こちらの p タグの id content_C をコピーして href の中に貼り付ける そして頭に # を付けます これでそれぞれのタブに対応した それぞれのコンテンツへの紐付けが 完了しました ただまだこの javascript の方 こちらの部分には これに応じたタブの切り替えと同時に コンテンツもその内容に切り替える という機能を実装していないので まだ動きません では実際にどのように 切り替えていくかというと こちらの a タグに対する クリックイベントの中で クリックされた a タグの href 属性 先ほど指定したものですね そちらの値を取得して それに対応した p タグを表示していく といった流れになります 具体的な実装方法については 次回のレッスンで 具体的に解説していきますので そちらも合わせて参考にしてください 以上で今回のレッスンは終了です 今回は javascript と jQuery を使って タブ切り替えコントロールを 実装するにあたっての それぞれのタブとコンテンツ部分を 紐付ける方法について解説いたしました

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

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

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

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

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

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