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

タブ部分の選択状態の切り替え

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
タブ部分をクリックした際に、そのタブを選択状態のデザインを切り替える方法について解説致します。
講師:
08:48

字幕

このレッスンでは これまでのレッスンに引き続き JavaScript と jQuery を 使って タブ切り替えコントロールを 実装するにあたり クリックして選択したタブのデザインを 選択状態にする方法について解説いたします まずは ダウンロードしてきた この tab_switch という フォルダの中に入っている この3つのファイル これをエディターで開いてください そしてこれがそれらのファイルを 開いた状態です このファイルを使って 今回のレッスンの解説を進めていきます それでは早速 レッスンを始めていきましょう それではまず一度現在のこのファイルの状態を ブラウザで確認してみましょう 先ほどのこちらの index .html こちらをブラウザで開いてみます すると このような画面が表示されましたね 現在はこちらのタブ それぞれをクリックしても こういったアラートが出るだけで 見た目は何も変わりませんね 今回はこの例えば 「タブA」をクリックした時に このタブの部分が選択状態であることを 示すデザインに変更するような 処理をやってみたいと思います それでは エディターに戻ります 今回はその選択状態のデザインに 変えるために stylesheet を利用します それでは stylesheet.css を開いてみます そして下のほうにいってみますと こちらの部分「タブ選択状態」 とコメントが入力されている箇所がありますね 実は既に今回の選択状態のデザイン― こちらの stylesheet に 実装済みとなっています 具体的にはどういった 処理をしているかというと タブ部分のグラデーション その部分を白一色にまずは変えています そして border-bottom 要するに底辺のボーダーですね その部分を無くした状態にしています ポイントはこの a タグの後ろに クラス selected が 指定されていますね 要するにタブの中の a タグに クラス selected をつけると 選択された状態の デザインに変わるということです それでは 次に javascript.js こちらを開きましょう 今 このような状態になっていますね では こちらの部分に実際に 選択状態のデザインに変更するような 処理を書いてみたいと思います まずはこちらの alert(' テスト '); を 削除します そして 先ほど css で作成されていた selected というクラスを クリックされたこの a タグ タブの中に入っている a タグに 追加するような形の処理を 実装してみたいと思います そのためには このように書いていきます まず $(this) と入力します そして .addClass(); そして .addClass(); の引数の中に先ほどの追加したい クラス名を書きます 要するにこのような形で 'selected' と書くわけです こうすることによって クリックされた a タグ 要するにこの this で 表されるものですね クリックされた a タグに add.Class クラスを追加しろ― そして何のクラスを追加するのかは こちらの 'selected' ですね 'selected' という名前の クラスを追加しろという 命令の1文になります それでは この状態で 一度ファイルを保存します そして index.html を ブラウザで開いてみましょう すると このように表示されましたね では早速クリックしてみたいと思います すると このような形でデザインが 変わりましたね では こちらタブBもクリックしてみましょう 同じように変わりましたね タブCも同様です ただ この状態少し変ですね やはり1つ選択すれば 他の2つのタブは 非選択状態のデザインに戻したいですよね それでは その部分を実際に 実装していきたいと思います エディターに戻ります それを実装するためには このように書いていきます まずタブの中のすべての a タグを指定します $() そしてこの中に この上の部分で指定してあるものと同じです これをコピーして こちらに貼り付けておきましょう そして この後に .removeClass(); そして この .removeClass(); の 引数に削除したいクラス名を書きます ですので 同様に 'selected' ですね こうすることによってまず タブがクリックされました そしたら このタブの中に入っている a 要素についている 'selected' のクラスを すべて取り去ります その後に this ですね 要するにクリックされた a タグ そのものに対して このように 'selected' のクラスを 追加するといった命令になります それでは この状態でファイルを保存して 再度ブラウザで確認してみましょう こちらの index.html を 開きます するとこのような画面が出てきて 早速クリックしてみたいと思います まずはタブA 選択状態に変わりましたね ではタブBをクリックします すると先ほど選択状態だったタブAが 元の非選択状態のデザインに戻って タブBだけが選択状態になっていますね そしてタブC こちらもタブBが元の 非選択状態に戻りましたね このような形でタブのデザインを 切り替えることができました 最後にこの index.html を ブラウザで開いたときに デフォルトの状態でタブAが 選択されている状態にしておきましょう エディターに戻ります そして index.html を 開きましょう そしてこちらのタブ A の a タグの部分 こちらに先ほどの selected のクラスを 追加しておいてあげます "selected" ですね そしてファイルを保存して 再度ブラウザで確認してみましょう するとこのように初期状態でタブAが 選択されている状態になっていますね 下には同様にタブAの コンテンツが表示されています タブBを選択するとこうですね タブCもこうなります このように JavaScript と そして CSS を組み合わせることによって このように動的に デザインを変更することができます それではエディターに戻ります 以上でレッスンは終了です 今回は JavaScript と jQuery を使って タブ切り替えコントロールを 実装するにあたっての クリックして選択したタブのデザインを 変更する方法について 解説いたしました 以降のレッスンでは それぞれの タブ部分とそれに対応したコンテンツ部分を 紐づける方法について解説していきますので そちらも合わせて参考にしてみてください

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

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

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

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

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

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