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

Я пытаюсь разместить пользователей без JavaScript. (Кстати, это стоит сегодня?)

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

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

16
html javascript noscript

6 ответов

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

код:

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

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

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

8

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

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

затем, в головном разделе HTML-документа, я добавил Это в:

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

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

32

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

10

кстати, это стоит усилий сейчас?

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

простым примером может быть всплывающая ссылка. Вы могли бы сделать такой:

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

однако эта ссылка не будет работать, если кто-то, скажем, щелкнул или попытался закладка его, или были отключены скрипты и т. д. Вместо этого вы можете сделать то же самое:

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

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

4

путь 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>
3

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

As упомянуто Рейнисом I. это идея Постепенное Повышение.

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

2