Wie um zu Zeigen, Ein <div> wenn Javascript Aktiviert ist und ein Anderes <div> wenn Es das Nicht?

Bin ich mit etwas Javascript für die Anzeige einer "Foto-rotator fade" in einem <div>. Wenn JS nicht aktiviert ist, aber ich habe eine animierte gif-Datei, die ich anzeigen möchten, statt. Ich habe eigentlich, es funktioniert mit diesem code:

<div id="slideshow" class="show pics float-left">
    <img src="images/banner-photos/new-01.png" width="343" height="228" alt="photo" />
    <img src="images/banner-photos/new-02.png" width="343" height="228" alt="photo" />
    <img src="images/banner-photos/new-03.png" width="343" height="228" alt="photo" />
</div>

<noscript>
    <link href="css/hide-slideshow.css" rel="stylesheet" type="text/css" />
    <p class="adjust"><img src="images/banner-photos/animation.gif" alt="slideshow" /></p>
</noscript>

Externe JS Dateien, die Ihre Magie auf die <div>. Die Klassen, die auf id="slideshow" - Abmessungen, padding, margin, Positionierung, etc. Die "ausblenden" -slideshow" - css-Datei hat ein "display:none" im #slideshow und auf "anpassen" - Klasse um die animierte gif-Datei hat einige schieben und ziehen, um es zu bekommen, wo Sie benötigt werden (das ist, wo die slideshow würde, wenn es nicht ausgeblendet).

Habe ich getestet, im FF3, IE7, IE8, Chrome und Safari (Win). Die gute Nachricht ist, dass es funktioniert wie ein Charme. Die schlechte Nachricht ist, dass es nicht pass der W3C-validator. Ich erhalte eine Fehlermeldung, die sagt, "Dokumenten-Typ nicht erlauben, element "link" hier".

Obwohl meine Methode funktioniert, ist es auch kludgey? Gibt es eine bessere Möglichkeit zu zeigen, dass man <div> wenn JS aktiviert ist und eine andere <div> wenn es nicht ist, in einer Weise, die funktioniert cross-browser und übergibt die Validierung?

Dank!

InformationsquelleAutor | 2009-06-08

24

Probieren Sie etwas wie dieses. Es degradiert anmutig und erfordert keine <noscript /> tag.
```
<div id="hasJavaScript" style="display: none">
    
</div>

<div id="noscript">
    
</div>

<script type="text/javascript">

    document.getElementById('hasJavaScript').style.display = 'block';
    document.getElementById('noscript').style.display = 'none';

</script>
```
Um das Beispiel kurz zu machen, ich verwendeten IDs. Es wäre besser geeignet, um Klassen zu verwenden. Außerdem haben die meisten anständigen starter-frameworks wie HTML5 Boilerplate und Modernizr wird dies über CSS-Klassen im HTML-tag, so dass Sie eine Globale Weise zu verstecken/zeigen Sie Inhalte von Ihrem CSS-Datei anstelle der Verwendung von JS. Die <html /> tag beginnt mit einem no-js CSS-Klasse und es wird ersetzt durch eine js Klasse in JS. Dies ermöglicht Ihnen, nur Präfix alle CSS-Regeln, die abhängig von der Existenz von JS mit der entsprechenden Klasse. Dies ist mehr semantische seit es trennt Layout-Dinge (was soll visuell ausgeblendet/angezeigt) aus logischen Dinge (ob die Seite läuft, JS oder nicht).

Weitere option für die Beantwortung der ursprünglichen Frage ist, fügen Sie den link auf das CSS-Dokument in den Kopf von default und entfernen Sie es mithilfe von JavaScript. (HAFTUNGSAUSSCHLUSS) habe ich noch nicht getestet, aber es sollte auch in allen Browsern.
```
<script type="text/javascript">
    var cssDocs = document.getElementsByTagName('LINK');
    for (var i = 0; i < cssDocs.length; i++) {
        var css = cssDocs[i];
        if (css.href === 'css/hide-slideshow.css') {
            var parent = css.parentNode;
            parent.removeChild(css);
            break;
        }
    }
</script>
```
Dieses Skript kann auch verkürzt werden, wenn Sie mit jQuery.
```
$("link[href='css/hide-slideshow.css']").remove();
```
Vielen Dank, Dan. Ich mag die Eleganz Ihrer ersten Vorschlag. Ich werde versuchen, es in den morgen - ich bin immer zu schläfrig jetzt gerade denken...
Erste option muss wie folgt Aussehen: document.getElementById('hasJavaScript').Stil.display = "block"; Beachten Sie die extra .Stil.
Hoppla. Überrascht, dass ich fehlte. *Behoben. Danke.

InformationsquelleAutor Dan Herbert
4

Geben nur die nicht-Javascript - div seine eigene Klasse und seinen Stil definition in Ihrem stylesheet. In ein <noscript> block. Sie können dynamisch und stecken Sie das andere div mit Ihrem Skript.

InformationsquelleAutor Paul Fisher
0

Habe ich <link...> element gehört in die <head...> daher der Fehler.

Die einfache Lösung ist es, die "no-javascript" css in eine Haupt-css-Datei geladen wird, in der <head...>

InformationsquelleAutor UnkwnTech

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.