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

タブ部分のHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
タブ部分のHTMLコーディングの方法について解説します。
講師:
05:19

字幕

このレッスンでは JavaScript と jQuery を使って タブ切り替えコントロールを 実装するにあたり まずはタブ部分の HTML コーディングの 方法について解説いたします まずダウンロードしてきたこの tab_html というフォルダの中にある― これら3つのファイルを エディターで開いて下さい これがそのファイルを開いた状態です こちらが index.html こちらが javascript.js そしてこちらが stylesheet.css です こちらの JavaScript とこちらの CSS に 関してはまだ何も記述がない状態です こちらの index.html については HTML をコーディングしていくにあたり 基本的なタグが書かれた状態となっています こちらのファイルを使って今回のタブ部分の HTML コーディングについて 解説していきたいと思います 早速レッスンを始めていきましょう タブ部分の HTML コーディングは こちらの body タグの中に書いていきます 早速こちらに記述していきたいと思います タブ部分のコーディングについては 色々な書き方がありますが 今回はリストの ul タグと li タグ そしてリンクの a タグを使って 記述して行きます まずは ul タグです こちらを書きます そして ですね この中に li タグを書きます そして です この li タグですね こちらの間に改行を入れて こちらに a タグを書きます a タグには勿論 href 属性がありますが 今回は内容を空っぽにして記述していきます そして そしてこの中にタブの中に入れる テキスト文言を設定します 今回は分かりやすいように 「タブA」としておきます そして今回はこちらのタブメニューを 3つ作りますので この li タグをコピーしてそのまま 下に2つ貼り付けます こうすることで3つのメニューができましたね そしてこちらの「タブA」の部分を 「タブB」 そしてこちらを「タブC」に 変更しておきましょう そしてこちらの a タグに この中に id = " " と書いて それぞれのタブを判別するための ID を設定しておきましょう ここでは tab_A と書いておきましょう そして他の2つの a タグに対しても このように貼り付けて そして内容をそれぞれ tab_B そして tab_C としておきましょう 最後にこちらの ul タグにも 目印となるように ID をつけておきましょう id = " " そしてこの " " の中に tab と 入れておきましょう 以上でタブ部分の HTML コーディングは 完了となります 思いのほか簡単でしたね ではこちらのファイルを保存します ファイルの保存のキーボードショートカットは Mac では command と S の同時押し Windows ではCtrl と S の同時押しでしたね では 保存します この保存した index.html を ブラウザで開いてみましょう 先程のダウンロードしてきたファイルの 中にあるこちらの index.html ですね こちらをブラウザで開きます 今回確認するブラウザは Chrome ブラウザです では開いてみましょう するとこのように表示されましたね このように表示されればきちんと コーディングができてる事になります ではエディターに戻りましょう 以上でレッスンは終了です 今回は JavaScript と jQuery を使って タブ切り替えコントロールを実装するにあたり タブ部分の HTML コーディング について解説しました 以降のレッスンではタブによって 切り替えられるコンテンツ部分の― HTML コーディングについて 解説しますので そちらも合わせて参考にして下さい

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

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

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

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

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

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