BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

[jQuery]タブ切り替えをプラグインを使わずに自前で実装する

更新日:2017/06/27

eyechatch_2_tab_switching_with_jquery_170623
タブ切り替えを実装したいときに、jQueryのブラグインを利用するやり方もありますが、タブ切り替えくらいならプラグインを使わずに、自前で実装したほうがいろいろと軽快です。
js部分だけだと6~7行で記述できてしまいます。
ちなみに、このページのタブ切り替えは自前で作ったjsです。

  • プラグイン利用
  • 自前で実装

合計サイズ:38KB

合計サイズ:2KB

とはいえ、タブ切り替え時に効果を付けたい時は素直にプラグインを利用したほうが楽かもしれません。
以下で、フェード切り替えを自前で実装してみたら思ったより時間がかかってしまいました。
結果的にはせいぜい10行くらいのjsなのですが・・・。
でも一度作ってしまえば使いまわせますから便利ですね。

  • プラグイン利用
  • 自前で実装

合計サイズ:38KB

合計サイズ:3KB

jQueryの公式プラグイン「jQuery UI」のフルバージョンだと250KB、タブ機能だけのバージョンでも40KB近くなので、自前で作ったコードで少しでも軽量化に貢献できると幸いです。

南本貴之


FOLLOW US