タブメニューは更新・お知らせ等の情報が多いポータルサイトで良く見かけると思います。
そんなタブメニューをサイトに組みこむ時の参考にして下さい。
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。
以上、既出なネタですが、自分の勉強も兼ねて掲載してみました。