WebデザイナーのためのJavaScript & jQuery入門

タブパネルを作ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
タブをクリックすることで内容が切り替わるパネルを作ってみましょう。
講師:
06:10

字幕

このレッスンでは jQuery によるタブパネルを作ってみましょう。まずタブパネルがどんなものかを見ておきます。final のファイルをブラウザで開きます。そうしますと、「タブ1」「タブ2」というものがあってクリックをするとそれぞれのボックスに入った内容がどちらか一方閲覧できるようになっています。それでは begin のファイルをブラウザでそして Sublime text で開き編集をしていきましょう。まず begin のファイルは この様に2つの内容がそのまま重なっています。まずタブのデザインはHTML と CSS でできています。CSS で装飾をしておりHTML の構造でこのタブのエリアと箱ができています。まず id tabs というもので包まれておりul タグで「タブ1」「タブ2」というものができていて内容は div class="panel" というものでそれぞれ包まれています。では jQuery を書いていきましょう。まず1つ目のタブ以外を隠すという命令を書いていきます。$ ( ' ' ) そしてここにセレクタを書くわけですが1つ目以外のタブを隠すにはまず .panel というものを書いてそしてここで条件を指定します。 : not ( : first)そして括弧を閉じます。これで1つ目のタブ以外という内容になっています。そしたらメソッド.hide ( )そしてセミコロンで隠すことができます。ここで上書き保存をしてブラウザを更新してみます。そうしますと、この内容が1つ目のパネルですので2つ目のパネルは hideで隠すことができました。それでは Sublime text で続きを記述していきましょう。まずタブを変数に代入しておきます。この様に書きましょう。変数である var で tab というのを宣言してその中に$ ( '.tab-nav ' ) の子供の要素の li と記述しておきます。こうすることで tab と3文字打てばこの内容が代入されているので短くプログラムを記述できるということになります。それではクリックイベントを書いていきましょう。tab と打って、これをクリックしたらというイベントを書きます。まず .click ( function ) と入力をしてfunction の引数の ( )その隣に { } を入れて改行をして、ここに中身を書いていきます。まず tab.toggleClass と書きます。 そして ( )そして toggleClass は クラスを付けたり外したりするものなのでここにクラス名をクォテーションで囲って書かなければなりません。なので active と書いておきます。そして行末にはセミコロンそして改行をして肝心の動きの方です。$ ( ' ' )そしてクラス panel なので.panel と書いてそしてここに命令を書くんですが.toggle と書いてそして、セミコロンです。それぞれの命令がちゃんと効いているか確認をしてみましょう。上書き保存をしてブラウザに移動そして更新をします。そして「タブ2」をクリックしてみると「タブ2」の中身が表示されました。また、「タブ1」の内容も無事に戻ってこれました。このクラス active というのが何をしているかは実は CSS を見るとわかります。CSS で active というクラスは背景を色を変えて文字色を白にして下さいということで、今自分がどちらのタブにいるかを判別するためにクラスを付けているただこのクラスはちゃんと付け変わらないとどちらのタブにいるかがわからなくなってしまうのでtoggleClass として付けたり外したりということができるようにしました。 また toggle という命令はshow と hide を交互に繰り返すという命令なので現れていれば隠れる隠れていれば現れるというのを1単語で可能になるというメソッドです。このレッスンではタブパネルを使ってプログラムを短く方法も学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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