Содержание
Динамический HTML (DHTML) позволяет создавать приложения в стиле приложений на ваших сайтах, уменьшая частоту полной загрузки целых страниц. В приложениях, когда вы нажимаете на что-либо, приложение немедленно изменяется, чтобы показать это конкретное содержимое или предоставить вам ваш ответ.
Напротив, веб-страницы обычно должны быть перезагружены, или должна быть загружена совершенно новая страница. Это может сделать пользовательский опыт более разобщенным. Ваши клиенты должны ждать загрузки первой страницы, а затем снова ждать загрузки второй страницы и так далее.
С помощью
улучшить опыт просмотра
Используя DHTML, одним из самых простых способов улучшить этот опыт является включение и выключение элементов div для отображения контента по запросу. Элемент div определяет логическое разделение на вашей веб-странице. Думайте о div как о блоке, который может содержать абзацы, заголовки, ссылки, изображения и даже другие div.
Что вам нужно
Для того чтобы создать div, который можно включать и выключать, вам необходимо следующее:
- Ссылка для управления div путем включения и выключения при нажатии.
- Див, чтобы показать и скрыть.
- CSS для стилизации div скрытый или видимый.
- JavaScript для выполнения действия.
Управляющая ссылка
Контрольная ссылка — самая простая часть. Просто создайте ссылку, как и на другую страницу. Пока оставьте атрибут href пустой.
Выучить HTML
Разместите это где-нибудь на своей веб-странице.
Див, чтобы показать и скрыть
Создайте элемент div, который хотите показать и скрыть. Убедитесь, что у вашего div есть уникальный идентификатор. В этом примере уникальным идентификатором является Learn HTML.
Это столбец контента. Он начинается пустым, за исключением этого текста объяснения. Выберите, что вы хотите узнать в столбце навигации слева. Текст появится ниже:
Выучить HTML
- Бесплатный класс HTML
- Учебник HTML
- Что такое XHTML?
CSS, чтобы показать и скрыть Div
Создайте два класса для вашего CSS: один, чтобы скрыть div, а другой, чтобы показать его. У вас есть два варианта для этого: отображение и видимость.
Display удаляет div из потока страниц, а видимость просто меняет его вид. Некоторые кодеры предпочитают отображение, но иногда видимость тоже имеет смысл. Например:
.скрытый {показ: нет; }
.unhidden {display: block; }
Если вы хотите использовать видимость, измените эти классы на:
.скрытый {видимость: скрытый; }
.unhidden {видимость: видимая; }
Добавьте скрытый класс в ваш div, чтобы он начинался как скрытый на странице:
JavaScript, чтобы заставить его работать
Все, что делает этот скрипт, это смотрит на текущий класс, установленный в вашем div, и переключает его на unhidden, если он помечен как скрытый, или наоборот.
Это всего лишь несколько строк JavaScript. Поместите следующее в заголовок вашего HTML-документа (перед тегом:
функция показать (divID) {
var item = document.getElementById (divID);
if (item) {
item.className = (item.className == 'скрытый') 'нескрываемым'?: 'скрытый';
}
}
Что делает этот скрипт, строка за строкой:
Вызывает функцию unhide, а divID — это точный уникальный идентификатор, который вы хотите показать или скрыть.
Устанавливает переменный элемент со значением вашего div.
Выполняет простую проверку браузера; если браузер не поддерживает getElementById, этот скрипт не будет работать.
Проверяет класс на div. Если он скрыт, он меняет его на невидимый. Иначе, это изменяет это к скрытому.
Закрывает оператор if.
Закрывает функцию.
Чтобы скрипт работал, нужно сделать еще одну вещь. Вернитесь к своей ссылке и добавьте javascript в атрибут href. Обязательно используйте точный уникальный идентификатор, который вы назвали своим div в этом href:
Выучить HTML
Поздравляем! Теперь у вас есть div, который будет отображаться и скрываться при каждом нажатии на ссылку.
Возможные проблемы, на которые стоит обратить внимание
Этот сценарий не является надежным. В некоторых ситуациях это может вызвать проблемы для вас:
JavaScript не включен. Если у ваших читателей нет JavaScript или он отключен, этот скрипт не будет работать. Скрытые элементы остаются скрытыми независимо от того, что делают ваши читатели. Один из способов исправить это — поместить скрытые элементы div в область noscript, но вам придется поэкспериментировать с этим, чтобы они правильно отображались.
Слишком много контента. Это может быть отличным инструментом, позволяющим вашим читателям видеть только то, что им нужно, но если вы поместите слишком много в скрытые элементы div, это может существенно повлиять на загрузку страницы. Помните, что, несмотря на то, что контент не отображается, веб-браузер все еще загружает его, поэтому будьте внимательны, сколько контента вы скрываете.
Клиенты не понимают. Наконец, клиенты могут не привыкать нажимать на ссылку, которая показывает или скрывает контент. Поиграйте с иконками (плюс знаки и стрелки работают хорошо) или текстом, чтобы объяснить, что будет с вашими клиентами. Другое решение — оставить один из элементов div открытым, а остальные — закрытым. Это может донести идею до ваших клиентов, чтобы они могли быстрее понять, как открыть оставшийся контент.
Вы всегда должны тестировать динамический HTML таким образом со своими клиентами. Как только вы почувствуете, что они могут понять и использовать его, это может стать отличным способом получения большого количества контента на ваших веб-страницах, не занимая много видимого пространства.
