【jQuery｜初心者向け】タブ切替の作り方
タブ切り替えと言っても色々な作り方がありますが
自分で初めて書いた時のタブ切り替えの方法を、
備忘録としてスクリプトの使い方から順を追って解説します。
初心者向けです。
1.要件と仕様を書きだす
2.HTML、CSSの準備
3. jQueryの準備
4. htmlに読み込む
5.スクリプトを書く
1.要件と仕様を書きだす
まずは 要件（どんな動きにしたいか）と仕様（その作り方や細かい指定）を書き出します。
※どんな動きになるのか理解し、それを実現させるため、必要な工程なので必ず書くこと。
今回は、以下の要件と仕様を満たすタブを作成します。
＜要件＞
・タグクリックで表示する内容を切り替える
＜仕様＞
・タブを押すと、指定したidのコンテンツが切り替わる
・表示される時のエフェクトはフェードイン
・cookieの設定のなし（更新時は毎回1つめのナビが表示される）
・HTMLにclassでラベリングすることで動作
・表示中のナビはカレント表示
2.HTML、CSSの準備
タブナビゲーション部分
div.tabUnit > ul.tabNav li a
タブ本文部分
div.tabUnit > div.tabBody#body01
div.tabUnit > div.tabBody#body02
を用意し、
タブナビゲーションのリンクにタブボディのidを指定する
3. jQueryの準備
http://jquery.com/ からjQueryをダウンロードする。
※minは、改行をなくして軽くしたもの。通常は改行していない方を使用。
※jQueryのバージョンが高ければ良いというものではない。
中にはバージョンが低くないと使えないプラグインもあるので注意。
4. htmlに読み込む
3でダウンロードしたものと、タブを動かすスクリプトを書くファイルを用意し、読み込む。
↓headに記載
<script type=”text/javascript” src=”/jquery.js”></script>
<script type=”text/javascript” src=”/tab.js”></script>
xhtmlではスクリプトの宣言を忘れずに入れる。
<meta http-equiv=”content-script-type” content=”text/javascript” />
5.スクリプトを書く
(function($){
})(jQuery);
javascriptで、「ここからここまでがjQueryですよ」という風にくくると、
他のライブラリーで$を使っても識別されるため、この中に書くようにする。
その中に、DOM構築後に処理させるようにスクリプトを書いていく
(function($){
$(function(){
//設定
});
})(jQuery);
設定の内容は以下参照
※「＋」ボタンクリックでHTML、CSS、JSのソースが確認できます。
ただ、このままだと、複数あった場合、どちらか一方しか効かなかったりと、
おかしくなってしまうため、eachを使う
$(‘selector’).each(function(){};の形でくくってあげる
