GHWEB06.GRASSHOPPER

タブメニューは更新・お知らせ等の情報が多いポータルサイトで良く見かけると思います。
そんなタブメニューをサイトに組みこむ時の参考にして下さい。
jQuery本体は、Google Hosted Libraries の バージョン1.9.1 を使用します。

タブメニューのスクリプトとサンプル

jQuery(function($){
var tabmenu = $('#tabmenu ul li');
$('#box div').hide().eq(0).show();
tabmenu.eq(0).addClass('navhit');
tabmenu.click(function () {
var no = $(this).parent().children().index(this);
tabmenu.removeClass('navhit');
$(this).addClass('navhit');
$('#box div').hide().eq(no).show();
});
});

サンプル

スクリプトの処理内容

以下、スクリプトの説明になります。

//スクリプトの2行目
//#tabmenu ul li を変数 tabmenu に格納
var tabmenu = $('#tabmenu ul li');

//スクリプトの3行目
//メソッドチェーンを使って以下の処理を纏めています。
//$('#box div').hide();
//$('#box div').eq(0).show();

//処理は、#box div要素を非表示にした後、0番目だけ表示
//（数値が0からカウントされるので1番目の要素は0）
$('#box div').hide().eq(0).show();

//スクリプトの4行目
//変数tabmenu(#tabmenu ul li要素)の0番目にクラス「navhit」を追加
tabmenu.eq(0).addClass('navhit');

//スクリプトの5行目
//変数tabmenu(#tabmenu ul li要素)がクリックされたら {   } の中を実行
tabmenu.click(function () {

//スクリプトの6行目
//クリックされたタブがli要素の何番目かを調べて変数「no」に代入
var no = $(this).parent().children().index(this);

//スクリプトの7行目
//変数tabmenu(#tabmenu ul li要素)からクラス「navhit」の削除
tabmenu.removeClass('navhit');

//スクリプトの8行目
//クリックされたタブ要素liにクラス「navhit」を追加、
$(this).addClass('navhit');

//スクリプトの9行目
//#boxのdiv要素を非表示にした後、変数「no」だけを表示
$('#box div').hide().eq(no).show();

縦メニューにしてみる

htmlとcssを変更すると縦メニューにもできます。jQueryは変更無しでOK。

サンプル

---

以上、既出なネタですが、自分の勉強も兼ねて掲載してみました。