2009-10-16 12 views
15

私はJavaScriptなしでユーザーを収容しようとしています。 (ちなみに、今は努力する価値がありますか?)JavaScriptが無効になっているとHTMLの一部を隠すには?

スクリプトがの場合はに、スクリプトがオフの場合は別の部分に1つのHTMLファイルを実行したいと思います。

<noscript>タグは前者を行うことができますが、後者はどのように達成するのですか?スクリプトがオフの場合、ブラウザで解析されないようにHTMLの一部をマークするにはどうすればいいですか?

答えて

7

は、ここでは、これはjQueryを使って行うことができる方法についてのビデオチュートリアルです0

コード:

<body class="noscript"> 
<script> 
$('body').removeClass('noscript'); 
</script> 
</body> 

そしてちょうど応じbody.noscriptの下に、関連する要素を非表示にします。

編集 しかし、jQueryのは、このような小さな修正のための肥大化であるかもしれないので、それはjQueryのを必要としないので、私はZauber Paracelsus' answerを示唆しています。

+0

@ user2667066これはデフォルトであり、JQueryが必要なので間違った答えにコメントしたと思います。 – Natrium

+0

Eidited and moved、申し訳ありません – user2667066

10

デフォルトで非表示にしたいビットをdisplay:noneと指定し、それらをjQueryまたはJavaScriptでオンに切り替えます。

+0

onreadyイベントは良い方法です – Ismael

3

jQueryの道::

$(document).ready(function(){ 
    $("body").removeClass("noJS"); 
}); 

擬似CSS

body 
    .no-js-content 
     display: none; 
body.noJS 
    .main 
     display: none; 
    .no-js-content 
     display: block; 

HTML

<body class="noJS"> 
    <div class="main"> 
     This will show if JavaScript is activated 
    </div> 
    <div class='no-js-content'> 
     This will show when JavaScript is disabled 
    </div> 
</body> 
4

ところで、努力する価値があるのですか 今日は?

はい、アクセシビリティについて心配する価値はあります。可能であればプログレッシブエンハンスメントを使用する必要があります。つまり、スクリプトなしで動作する基本バージョンを作成し、その上にスクリプト機能を追加する必要があります。

単純な例は、ポップアップリンクです。あなたが同じことを行うことができ、誰かが、たとえば、中間クリックまたはブックマークにそれをしようとした場合

<a href="javascript:window.open('http://example.com/');">link</a> 

ただし、このリンクは機能しない、またはスクリプトが代わりなど無効になっていた:あなたはこのようなものを作ることができますこのように:

<a href="http://example.com/" 
    onclick="window.open(this.href); return false;">link</a> 

あなたが行動と構造層を分離し、インラインのイベントハンドラを避ける必要がありますので、まだ完璧ではないのですが、それはより多くのアクセス可能だとスクリプトを必要としないので、それは、良いでしょう。

+2

あなたはJavaScriptを必要としません。ターゲットに名前を付けるか(または 'target = "_ blank"'を使用する) – Joe

+2

ReinisがReinisを入手していたとは思っていない – roryf

2

JavaScriptが有効になっている場合にのみコンテンツが意味を持つ場合は、レンダリングされるのではなくJavaScriptコードによって直接挿入する必要があります。これは、単にJavaScriptコード内に文字列としてHTMLテンプレートを置くか、HTMLがより複雑な場合にはAjaxを使用することによって行うことができます。

mentioned by Reinis I.これはProgressive Enhancementのアイデアです。

bodyタグにクラス名を使用するCSSテクニックに関しては、逆のやり方で、CSSのbodyタグにCSSを変更するJavaScriptを使って 'js-enabled'クラスを追加することをお勧めします。これは、最初のHTMLの「JavaScript非友好的」を維持するという私の上記のコメントに適合します。

27

これを行う方法を探していたので、javascriptが有効なときにレンダリングされないナビゲーションドロップダウンメニューを非表示にすることができました。しかし、表示プロパティを変更するソリューションはすべて機能しませんでした。

私が最初にしたことは、ドロップダウンメニューを囲むdiv要素にID(ddown)が割り当てられたことです。

その後、HTMLドキュメントのheadセクション内に、私は、これを追加しました:

<noscript> 
    <style> 
     #ddown {display:none;} 
    </style> 
</noscript> 

そして、それはちょうど働きました。 javascript、jquery、その他のスクリプトに依存しない:純粋なHTMLとCSS。

+1

これはデフォルトの回答である必要があります。シンプルでJQueryは不要です – user2667066

+0

何らかの理由で私のページで正しく動作していません。 JSが有効になっていても、セレクタは ''に表示されません。私のページは途中でXHTMLです。 – alej27

関連する問題