jQueryを使ってタブメニューを作る | A Day in the Life

January 6, 2012 ウェブサイトで多くの要素を省スペースで表示するのに役立つタブメニューは汎用的に使えて実用的なUIです。このタブメニューのインターフェイスはjQueryを利用すると簡単に実装出来ます。 今回はタブメニューを実装するまでを解説していきます。また、1ページ内で複数のタブを実装するにはプラグインの形式にすると便利ですので、最終的にプラグインの形にするまで2回のエントリーに分けて解説しようと思います。 HTMLはタブをul li、クリックされたタブに対応する内容を表示する要素をdivでマークアップします。HTMLコード、jQueryコードはそれぞれ次のようになります。 HTML Code <div class="tab"> <ul class="tab-list pkg"> <li><a href="javascript:;">tabA</a></li> <li><a