4月
21
2011
メニューやタブをjavascriptでactiveにするちょっとしたアイディア
投稿者: miztaka, カテゴリ: javascript, jquery, tips, tags: javascript, jquery概要
WebアプリケーションやWebサイトを構築するときにヘッダーやサイドバー領域などにメニューやタブを(アコーディオンや短冊型など)配置するデザインが一般的かと思います。
このようなデザインでは現在表示されているページのメニューには class=”active” などと指定してフォーカスを当てるようになっていることが多いですね。
全てのページをべたで静的HTMLとして作る場合はいいですがメニューやサイドバーを共通部品としてSSIやサーバーサイドのテンプレートエンジンでインクルードしている場合はどうやってメニューにフォーカスを当てようか思案のしどころです。
このような場面で使えそうなアイディアを紹介します。
アイディア
jqueryを使ってonload時にメニューにフォーカスを当てる(classを追加する)ようにします。
まず、メニューのフォーカスを当てたい要素には menu_ではじまるidをつけます。
つぎに、各ページのbodyのクラス属性に activeにしたいメニューのid名を列挙します。(メニューが多段構造になっている場合を考慮。)
このようにすることで全ページを共通処理できます。
jqueryコードサンプル
jQuery(function($){ // メニューアクティブ var classes = $('body').attr('class'); if (classes) { var class_ar = classes.split(' '); for (i=0; i<class_ar.length; i++) { if (class_ar[i].match(/^menu_/)) { var obj = $("#"+class_ar[i]); obj.addClass("active"); } } } });