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

投稿日:2017年6月26日

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

  • プラグイン利用
  • 自前で実装
合計サイズ:38KB

合計サイズ:2KB

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

  • プラグイン利用
  • 自前で実装
合計サイズ:38KB

合計サイズ:3KB

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

南本貴之


関連記事

カテゴリー: JavaScript, jQuery, サイト制作
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル
社内写真