jQueryで2段ナビゲーションのサンプルを作ってみた

jQueryで動くメニュータブのサンプルを作ってみました。
サンプルを用意して、jQueryに馴染みのない人向けにも、なるべくわかりやすいように解説してみました。

今回作ってみたのは、都道府県に関するサービスを作った時などに使うような、タブ型ナビゲーションです。

サンプル

まず地方だけが表示されていて、それぞれの地方をクリックすると、そこに属する都道府県が出てきます。
TOP、北海道、沖縄は、属するページが無いので、そのままリンクするようにします。

サンプルコード

ダウンロードサンプルに書いてあるjQuery,HTML,CSSのコードです。
jQueryは、サンプルコードのあとに、1行ずつの解説がありますので、確認してみてください。

jQuery

jQueryのコードが少し長いですが、行っていることは、シンプルの連続です。
1行ずつ確認していきましょう。

$(function() {
// 全部読み込んでから実行する準備をします。
$(“#navJapan li”).click(function(){
// #navJapan li をクリックしたら次の命令を実行してください。
var id = $(this).attr(“class”).split(“-“)[1];
// idという変数に、クリックしたセレクタのclass名を入れてください。
// ただし、2つ目の要素から、数字だけを「-」で区切って入れてください。
// 要素番号は0から始まるので[1]は2つ目の要素になります。
$(“#navJapan”).find(“li”).each(function(){
// #navJapanの中から、liを探して、その全ての要素1つ1つに対して、次の命令を実行してください。
$(this).removeClass(“current”);
// その全ての要素1つ1つから、currentというclassを削除してください。
});
// $(“#navJapan”).find(“li”).each(function(){ を閉じる。
$(‘div[id^=”navArea-“]’).each(function(){
// idが「navArea-」から始まるdivがあれば、その全ての要素1つ1つに対して、次の命令を実行してください。
var area = this;
// まず、areaという変数に、idが「navArea-」から始まるdivを全て入れてください。
$(area).hide();
// areaという変数、つまり、idが「navArea-」から始まるdiv、1つ1つにdisplay:none;をしてください。
// ようは、navArea-1とかnavArea-2とか全部消してくださいという命令です。
$(area).find(“li”).each(function(){
// areaという変数、つまり、idが「navArea-」から始まるdiv、の中から、まず、liを探して、その全ての要素1つ1つに対して、次の命令を実行してください。
$(this).removeClass(“current”);
// そのliからcurrentというclassを削除してください。
});
// $(area).find(“li”).each(function(){ を閉じる。
});
// $(‘div[id^=”navArea-“]’).each(function(){ を閉じる。
$(this).toggleClass(“current”);
// ここのthisは、$(“#navJapan li”).click(function(){ の部分のことです。
// #navJapan li をクリックしてたら、currentというclassをつけてください。
// thisは、クリックされたliだけを指定できる便利な指示なんです。
if (id != “1” && id != “9” ) {
// もし、idという変数が「1」の時と、「9」の時以外は次の命令を実行してください。
// idは最初に変数にいれました。area-1やarea-2というclassの中から数字だけを入れた変数です。
// ちなみに、1は北海道、9は沖縄です。areaBが出てこないので、ここは除いて実行させます。
$(“#navArea-” + id).show();
// navArea- というIDに、idをつけて、display:block;で表示してください。
}
// if (id != “1” && id != “9” ) { を閉じる。
});
// $(“#navJapan li”).click(function(){ を閉じる。
});
// $(function() { を閉じる

html

css

jQuery初心者ながら、サンプルファイルを作ってみました。
もっと良い方法があると思います。
おかしい部分がありましたら適宜修正して利用してください。

サンプルファイルを作りながら、もっと勉強していこうと思います。