Как скрыть части HTML, когда JavaScript отключен?

Я пытаюсь разместить пользователей без JavaScript. (Между прочим, стоит ли это в наши дни?)

В одном файле HTML я хотел бы, чтобы часть его выполнялась, если скрипты включены, а другая часть, если сценарии отключены.

Тег <noscript> позволяет мне делать первое, но как добиться последнего? Как я могу пометить часть HTML, чтобы она не анализировалась браузером, если скрипты отключены?

Ответ 1

здесь видео-учебник о том, как это можно сделать с помощью jQuery: http://screenr.com/ya7

Код:

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

А затем просто скройте соответствующие элементы под body.noscript соответственно.

изменить Однако JQuery может быть раздутой для небольшого исправления, подобного этому, поэтому я предлагаю ответ Zauber Paracelsus, поскольку для него не требуется JQuery.

Ответ 2

Я искал способ сделать это, чтобы я мог скрыть раскрывающееся меню навигации, которое становится рендечным нефункциональным при включении javascript. Однако все решения для изменения свойства отображения не работали.

Итак, сначала мне присвоили идентификатор (ddown) элементу div, окружающему раскрывающееся меню.

Затем в разделе заголовка документа HTML я добавил это в:

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

И это просто сработало. Никакая зависимость от javascript, jquery и других скриптов: просто чистый HTML и CSS.

Ответ 3

По умолчанию биты, которые вы хотите скрыть, в стиле display:none и включите их с помощью jQuery или JavaScript.

Ответ 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>

Это все еще не идеально, потому что вы должны отделять уровни поведения и структуры и избегать встроенных обработчиков событий, но это лучше, потому что оно более доступно и не требует создания сценариев.

Ответ 5

Способ jQuery:

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

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

Ответ 6

Если контент имеет смысл только в том случае, если JavaScript включен, то он должен быть вставлен кодом JavaScript напрямую, а не отображаться. Это можно сделать, просто используя HTML-шаблоны в виде строк в вашем JavaScript-коде или используя Ajax, если HTML более сложный.

Как упомянутый Рейнисом I., это идея Progressive Enhancement.

Что касается CSS-методов использования имени класса в теге body, я бы посоветовал сделать это другим способом и добавить класс body < js-enabled в тег body с JavaScript, который изменил бы CSS страницы. Это соответствует моему вышеприведенному комментарию о сохранении исходного HTML-кода, не поддерживающего JavaScript.