JavaScriptが無効（オフ）になっている時、どうするか？
先日、jQueryのアコーディオンパネルを組み込んだページを作りました。
FAQのページです。質問の部分をクリックすると答えが開くというやつです。
単純なものですが、問題が発覚しました。
JavaScriptがオフの時、アコーディオンバネルが開いて答えを見ることができなくなるので役に立たなくなってしまいます。
開くことができないなら、初めからすべてを開いておくしかない。
オフのときに、全てのアコーディオンパネルを開く方法はあるのか？
そこで、JavaScriptがオフになっている時の対処法を調べてみました。
対処法
<noscript>を利用する。
<noscript>というタグがあって、そのタグに囲まれたコードは、JavaScriptが有効な時は表示されず、無効になった時しか読み込まれないらしいです。
それを使って例えば、
<header>内でタグで別ページに飛ばす。
JavaScriptがオフになっているといメッセージを出す。
なんかができるそうですが、今回の 目的からはちょっと外れてるかも。
あらかじめオフの設定にしておいてオンになったら変更する
次に見つけたのはデフォルトでJavaScriptが無効の状態のスタイルを設定しておくというものです。
<html>タグにあらかじめ、クラスをつけておいて、それにJavaScriptがオフの時のスタイルを設定しておきます。
そして、オンの時にJavaScriptやjQueryでそのクラスを削除すればJavaScriptオフの時のスタイル適用を解除するというものでした。
オフの時をデフォルトにしてオンの時に目的の状態に変更するという、まさに逆転の発想ですね。
コード概要
<html class="no-js">
<head>
...
<style>
.no-js{
/*JavaScriptが無効のときのスタイルを設定*/
}
</style>
<script>
$(function(){
$('html').removeClass('no-js');
});
//Javascriptが有効な時"no-js"クラスを削除する。
</script>
...
</head>
<body>
...
</body>
</html>
コメント