Как показать один ‹div›, если включен Javascript, и другой ‹div›, если это не так?

Я использую некоторый Javascript для отображения «поворота фотографий» в файле <div>. Однако, если JS не включен, у меня есть анимированный gif, который я хочу отобразить вместо этого. У меня действительно работает с этим кодом:

<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>

Внешние файлы JS творят чудеса с файлом <div>. Классы в id="slideshow" задают размеры, отступы, поля, позиционирование и т. д. CSS-файл "hide-slideshow" выполняет "display:none" в #slideshow, а класс "adjust" для анимированного gif выполняет некоторые действия. толкать и тянуть, чтобы получить его там, где он должен быть (именно там было бы слайд-шоу, если бы оно не было скрыто).

Я тестировал это в FF3, IE7, IE8, Chrome и Safari (Win). Хорошей новостью является то, что это работает как шарм. Плохая новость заключается в том, что он не проходит проверку W3C. Я получаю сообщение об ошибке: «Тип документа не позволяет использовать элемент «ссылка» здесь».

Несмотря на то, что мой метод работает, он слишком неуклюж? Есть ли лучший способ показать один <div>, если JS включен, и другой <div>, если нет, таким образом, чтобы он работал в разных браузерах и проходил проверку?

Спасибо!


javascript hide css show
person Community    schedule 08.06.2009    source источник

Ответы (3)


arrow_upward
24
arrow_downward

Попробуйте что-нибудь вроде этого. Он изящно деградирует и не требует тега <noscript />.

<div id="hasJavaScript" style="display: none">
    <!-- Contents hidden when JavaScript is disabled -->
</div>

<div id="noscript">
    <!-- Contents shown only when JavaScript is disabled -->
</div>

<script type="text/javascript">

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

</script>

Для краткости примера я использовал идентификаторы. Правильнее было бы использовать классы. Кроме того, наиболее достойные фреймворки для начинающих, такие как HTML5 Boilerplate и Modernizr сделает это, используя классы CSS в теге HTML, поэтому у вас есть глобальный способ скрыть/показать контент из файла CSS вместо использования JS. Тег <html /> начинается с класса CSS no-js и заменяется классом js в JS. Это позволяет вам просто добавлять префикс к любым правилам CSS, которые зависят от существования JS, с соответствующим классом. Это более семантично, поскольку отделяет презентационные вещи (то, что должно быть визуально скрыто/показано) от логических вещей (независимо от того, работает ли страница на JS или нет).

Еще один вариант ответа на исходный вопрос — добавить ссылку на CSS-документ в шапку по умолчанию и удалить ее с помощью JavaScript. (ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ) Я не проверял это, но оно также должно работать во всех браузерах.

<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>

Этот сценарий также можно сократить, если вы используете jQuery.

$("link[href='css/hide-slideshow.css']").remove();
person Dan Herbert    schedule 08.06.2009
comment
Спасибо, Дэн. Мне нравится элегантность вашего первого предложения. Я попробую утром - я уже слишком сонный, чтобы соображать... - person ; 08.06.2009
comment
Первый вариант должен выглядеть так: document.getElementById('hasJavaScript').style.display = block; Обратите внимание на дополнительный .style. - person ajbeaven; 06.08.2010
comment
@ajbeaven Упс. Удивлен, что я это пропустил. *Фиксированный. Спасибо. - person Dan Herbert; 06.08.2010

arrow_upward
4
arrow_downward

Просто дайте не-Javascript div свой собственный класс и поместите определение его стиля в свою таблицу стилей. Включите его в блок <noscript>. Вы можете динамически вставлять другие div с помощью своего скрипта.

person Paul Fisher    schedule 08.06.2009

arrow_upward
0
arrow_downward

У меня элемент <link...> принадлежит <head...>, отсюда и ошибка.

Простое решение состоит в том, чтобы поместить css «без javascript» в основной файл css, который загружается в <head...>

person UnkwnTech    schedule 08.06.2009