Umgang mit erweiterbaren jQuery-Inhalten, wenn JavaScript deaktiviert ist

Question

Ich habe ein Messaging-Tool auf der Website, an der ich gerade arbeite. Die Idee besteht darin, für jede Nachricht ein Header-Div und ein Details-Div (display = "none") zu haben.

Im Idealfall, wenn Javascript aktiviert ist, habe ich nur die Kopfzeile angezeigt und wenn der Benutzer darauf klickt, öffnen Sie die Details div Folie.

Das ist in Ordnung, aber wie soll ich es arbeiten, wenn Javascript deaktiviert ist? Ich habe darüber nachgedacht, alle Nachrichten zu erweitern, wenn sie deaktiviert sind, aber ich möchte nicht kurz flackern, wenn die Seite alle Bilder öffnet, und wenn Javascript aktiviert ist, werden sie zusammenbrechen.

Ich benutze ASP.NET und dachte daran, Javascript-Status der Browser-Server-Seite zu überprüfen, aber ich fand heraus, dass es nicht sauber gemacht werden kann.

Haben Sie Vorschläge, wie Sie dies erreichen können?

Answer 1

Eigentlich die semantisch korrektste Möglichkeit, die Sie tun könnten, ist ein anderes Stylesheet an den Kopf über Javascript mit Stilen, die bei aktiviertem Javascript implementiert werden, anzuhängen.

In Ihrem Beispiel behalten Sie die Standardanzeige für die fraglichen Elemente bei.

Dann erstellen Sie ein zusätzliches Stylesheet (zum Beispiel js-enabled-styles.css), und platzieren Sie Ihre Anzeige: keine innerhalb davon.

Dann fügen Sie in einem Skript-Tag in Ihrem Kopf ein zusätzliches Stylesheet ein.jquery Mit dieser wäre:

$('head').append('<link rel="stylesheet" href="js-enabled-styles.css" type="text/css" />'); 

Answer 2

Sie haben Recht der Server kann Ihnen nur sagen, wenn der Browser JavaScript hat, hat es keine Ahnung, ob es aktiviert ist oder nicht.

Dinge, die Sie ausprobieren können, verwenden Sie nicht onready oder onload, legen Sie einfach die Zeilen auf der Unterseite Ihres JavaScript, um den Inhalt zu verbergen. Sie können es sogar direkt nach den Elementen auf der Seite platzieren.

<div id="foo"> 
    asdf 
</div> 
<script type="text/javascript"> 
    jQuery("#foo").css("display","none"); 
</script> 

Eine Randnotiz, klingt wie Sie eine definition list statt zwei divs verwendet werden soll. Würde wahrscheinlich mehr Sinn für eine Person mit einem Bildschirmleser machen.

Answer 3

Ich glaube, Sie suchen nach dem <noscript> Tag.

Sie können das Ergebnis, das Sie beschreiben, auf verschiedene Arten erreichen, aber hier ist es ziemlich einfach. Definieren Sie Ihre Standardstil für die div s, die folgenden sein:

<style type="text/css"> 
    div.details 
    { 
     display: none; 
    } 
</style> 

Und nach diesem style-Tag, verwenden Sie einen noscript Block die Standard außer Kraft zu setzen (JavaScript aktiviert) Stil, als solche:

<noscript> 
<style type="text/css"> 
    div.details 
    { 
     display: block; 
    } 
</style> 
</noscript> 

Answer 4

Eine Möglichkeit ist, platzieren diese in Ihrem Kopf (nach den definierten Stilen):

<noscript> 
<style type="text/css"> 
#mydivid {display: block;} 
</style> 
</noscript> 

EDIT: Ive hat tatsächlich a better answer gepostet, was in einem korrekten Standardzustand funktioniert.