ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【HTML】タブ切り替えする方法 CSS + JavaScript + jQuery

【HTML】タブ切り替えする方法 CSS + JavaScript + jQuery

「タブ切り替えする方法を知りたい」

悩み

こういった悩みにお答えします。

  • CSSだけでタブ切り替えする方法
  • JavaScriptでタブ切り替えする方法
  • jQueryでタブ切り替えする方法

この記事ではこんなことがわかります。

目次
  1. タブ切り替えする方法
    1. CSS
    2. JavaScript
    3. jQuery
  2. まとめ

タブ切り替えする方法

CSS

See the Pen タブ切り替え CSS by hashi84 (@hashi84) on CodePen.

radioボタンを使って、タブのON/OFFを制御します。

メリット
  • JavaScriptを使わないので、読み込み速度が遅くならない
デメリット
  • HTML構造に無理がある
  • タブが増えたときにCSSも編集する必要がある

JavaScript

See the Pen タブ切り替え JavaScript by hashi84 (@hashi84) on CodePen.

メリット
  • HTML構造が簡単になる
デメリット
  • jQueryを使わないので、書き方が複雑で難しくなる

以下の記事を参考にしました。

【JavaScript】タブ切り替えメニューを実装する方法|複数箇所の場合も | BLOG AND DESTROY

今回はWebサイトに、タブメニューを切り替えてコンテンツの内容を変更する機能を実装する例となります。 例ではJavaScriptを利用しシンプル・簡単に実装します。 【JavaScript】タブの切り替えメニューを実装す […]

jQuery

See the Pen タブ切り替え jQuery by hashi84 (@hashi84) on CodePen.

クリックしたタブの順番を取得して、同じ順番のコンテンツにactiveクラスをつけます。
表示、非表示はCSSで制御します。

メリット
  • HTML構造が簡単になる
  • CSS、JavaScriptと比較すると簡単に設置できる
デメリット
  • jQueryを使うので、読み込み速度が遅くなる

まとめ

タブ切り替えする方法を紹介しました。

  • CSSだけでタブ切り替えする方法
  • JavaScriptでタブ切り替えする方法
  • jQueryでタブ切り替えする方法

きっと、もっといい書き方があるので、より簡単で効率的な書き方をしてみてください。