noscriptタグを使ってタブ切替コンテンツをJSオフでも表示する方法

タブで切り替えられるコンテンツってありますよね？
JavaScriptで表示非表示を切り替えるのが一般的だと思いますが、今まではJSオフの対応として、JSからCSS読み込ませることでJSオフのときにもコンテンツが隠れないように対応していました。

結構面倒だし他に方法ないかな～と考えていたら、noscriptという便利なタグのことを思い出し、試してみることにしました。

追記:
Twitterでご指摘をうけたのですが、どうやら style要素は head要素内でしか使用してはいけないようです…。

要素型　head要素の子要素

引用元：style要素 XHTML HTML辞典

また、HTML5からは head要素内に noscript要素を追加してもいいことになったそうです。

HTML5ではnoscript要素がhead要素内にある場合には、noscript要素の中に link要素、style要素、meta要素を配置してもよいことになっています。

引用元：<noscript>－HTML5タグリファレンス:

本記事を参考にされる方はこちらを踏まえた上でご利用をお願いいたします。

1. noscriptタグでJSオフの時にdivを追加する

<noscript><div class="noscript"></noscript>
<div>表示コンテンツ</div>
<div class="hidden">非表示コンテンツ</div>
<noscript></div></noscript>

.hidden { display: none; }
.noscript .hidden { display: block; }

冗談半分にやったのにIEでもChromeでも動作してしまいましたｗ
しかしこれではHTML構造的にNGなので、実用的ではありません。

次の方法を試します。

<div>表示コンテンツ</div>
<div class="hidden">非表示コンテンツ</div>
<noscript><style type="text/css">.hidden { display: block!important; }</style></noscript>

.hidden { display: none; }

これなら特に問題なさそうです。
linkタグでCSSそのものを読ませても良いかもしれません。

実際にタブ切替を実装したデモを用意したので置いておきます。

他にもやっている方がいるか検索してみたところ、やはりいらっしゃいました。

JavaScript有効/無効に応じてformのactionを切り替えるのをHTMLだけで実現する

引用元：2011-04-19 - あっきぃ日誌

応用次第ではアクセシビリティ対応が充実しそうですね。