jQueryでなんちゃってタブコンテンツ

  • このエントリーをはてなブックマークに追加
  • Pocket

Bootstrapとか使ってるとあんまり気にしなかったりするけど、 たまーにそういったツールキットやプラグインを使わないでタブっぽいものを実装することに出くわす。

jQueryのindex()とeq()を駆使するとidやclassとか気にせずできるのでgoob.

なんちゃってタブ

例えばこんなhtmlがあったとして、

タブ(li)がクリックされた時に、それに対応するdivを表示してタブ切り換えっぽくみせる作戦。

jsはこうなる。

liのindex = コンテンツのindexになるように配置していれば切り替わってくれる。

タブがいっぱい

ついでに、html部分を複数配置しても全員が反応することなくちゃんと動く。

仕事でこんな感じのタブ切り換えを実装してくれという案件があって、 この1か月くらいですでに2回当たった・・・

1画面にいっぱいタブパネルが置かれてるページを作成するらしい。

それで、ulとコンテンツのdivに一つずつidを振ってたようだけど、数が多くてめんどくさかったのでその人の頑張りは無視してコレで実装。

「えっ!?」 って、言われたけど…ごめんねwww

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*