purazumakoiの[はてなブログ]

技術メモから最近はライフログも増えてきてます。

JavaScript でタブメニュー(画像ボタン)

画像をタブとして使いたかったので

画像をボタンとし、デフォルト、オーバー、アクティブでそれぞれ画像が切り変わるタブメニューを作りたいなと思い、jqueryでサクッと出来るサンプルとかあるかなと思ったけど無かった・・・
という事で


こちらのサンプルを元にカスタマイズさせていただきました↓
JavaScript でタブ切り替え UI を実装する | WWW WATCH


このサンプルはjsを切った時に、一覧としてページ内遷移で動くところがステキですね。
今回はせっかくなのでindexページから表示部分を制御するのもやってみました。
その辺に関してはコチラ↓
GETメソッドでパラメータを受け取るJavascript

出来たもの

・demo1
・demo2
※パラメータの?page=の値がタブの番号


ページ内に複数設置できるようにもしたー。
コメントととか付けてないのであとで見直した時に困りそう。


JavaScriptはクラスを定義するのに色んな書き方があるんだなー。
そしてなかなか思ったような動きをしてくれなくて困った。
文献をいっぱい読んだのでとりあえず動くのはできたけど、イマイチ仕様の理解はできてないぽい。


動作イメージ