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