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