【HTML】タブ切り替えする方法 CSS + JavaScript + jQuery
「タブ切り替えする方法を知りたい」
こういった悩みにお答えします｡
- CSSだけでタブ切り替えする方法
- JavaScriptでタブ切り替えする方法
- jQueryでタブ切り替えする方法
この記事ではこんなことがわかります｡
タブ切り替えする方法
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】タブ切り替えメニューを実装する方法｜複数箇所の場合も
今回はWebサイトに、タブメニューを切り替えてコンテンツの内容を変更する機能を実装する例となります。 例ではJavaScriptを利用しシンプル・簡単に実装します。 目次【JavaScript】タブの切り替えメニューを実 […]
jQuery
See the Pen タブ切り替え jQuery by hashi84 (@hashi84) on CodePen.
クリックしたタブの順番を取得して､同じ順番のコンテンツにactiveクラスをつけます｡
表示､非表示はCSSで制御します｡
- メリット
-
- HTML構造が簡単になる
- CSS､JavaScriptと比較すると簡単に設置できる
- デメリット
-
- jQueryを使うので､読み込み速度が遅くなる
まとめ
タブ切り替えする方法を紹介しました｡
- CSSだけでタブ切り替えする方法
- JavaScriptでタブ切り替えする方法
- jQueryでタブ切り替えする方法
きっと､もっといい書き方があるので､より簡単で効率的な書き方をしてみてください｡
