「タブ切り替え機能」部分のHTMLの作成方法 - jQueryのチュートリアル

このレッスンでは jQuery と jKit プラグインを使って― タブ切替機能を実装する為の HTML のコーディング方法について― いつくかのポイントをご紹介していきます まずは ダウンロードしてきた こちらの tabs-html ― というフォルダーの中に入っている こちらの index.html ファイルを― エディターで開いて下さい そして これがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう こちらの index.html ファイルの こちらの部分ですね seasonalMenu と書かれている 部分からこの様に下の部分まで この辺りまでですね この辺りまでがちょうど このタブ切替部分となっています まずは seasonalMenu という ID を付けたセクションタグで コンテンツの大枠を作って　そして h2 でタイトル画像を設置しています そして 実際にタブ切替でコンテンツが 切り替わる部分というのが― こちらの div タグの中になります それでは タブ切替部分をどの様に コーディングしているか　見てみましょう こちらの div タグの中の この一つのarticle タグ こちらの部分が一つのタブと それに連動するコンテンツとなっています まず こちらの article タグの中の こちらの h3 タグ この部分がちょうどタブの部分となります そして その次にあるこの dl タグ こちらの部分が 実際のコンテンツ部分となります つまりは タブ ここでは h3 タグですね この h3 タグの内容に連動するのが その直下の dl タグの中のコンテンツ― という形になります これが一つのタブのワンセットとなります そして 今回はこのワンセットが 合計 いち に さん 四つ― 設置している状態ですね これで四つのタブ切替のコンテンツが 出来上がる事になります それでは この状態でこの index.html ファイルを― ブラウザで開いて確認してみましょう はい これがその index.html ファイルを ブラウザで開いた状態です では 下の部分を見てみましょう こちらが先程 HTML コーディングを 行ったタブ切替の部分となっています ただ まだ…