質問: HTMLでタブによる要素の切り替えを実装する際、自分が思いつく限りでは以下の2つがあります。 ・JavascriptやCSSを用いてdisplayプロパティを切り替える 参考: ・Javascriptを用いてDOM要素そのものを書き換える タブ切り替えについて調べてもdisplayプロパティを切り替える方法の紹介がほとんどで、要素自体を入れ替える方法は自分が見た限りではあまり使われていないようです (使われているのをいくつか見た記憶はあります) 。 これらの方法の利点欠点,使い分けるべき状況はあるのでしょうか? 個人的な考えとしては、Javascriptを使えない環境においても最低限情報を提供できる前者の方が優れていると思うのですが、あまり開かれないタブに画像が大量にある等、初期の読み込みコストが懸念される場合には後者も選択肢に入るのかなと思っています。
回答: JavaScript の使用できない環境を考慮する必要があるかが 最大の分岐点だと思います。 考慮するのであれば、 CSS でタブ切り替えを実装することになると思います。 JavaScript を使用できる環境を想定しているのであれば、 どちらを選択しても画像読み込みのコストは変わらないので 好きなほうを選んだらいいと思います。 (画像の読み込みをタブを表示したタイミングで行えば ページ表示時に画像のダウンロードは発生しません。) また、別の問題として SEO を考慮する必要もあれば 手法は変わってくるかと思います。