Показать и скрыть текст или изображения с помощью CSS и JavaScript

Создайте на своих веб-сайтах интерфейс в стиле приложения

• Делиться
• флипборд
• Эл. адрес

• Калифорнийский университет
• Вашингтонский университет

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

Динамический HTML (DHTML) позволяет создавать на веб-сайтах интерфейс в стиле приложений, снижая частоту полной загрузки целых страниц. В приложениях, когда вы на что-то нажимаете, приложение немедленно меняется, чтобы показать это конкретное содержимое или предоставить вам ответ.

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

Использование для улучшения качества просмотра

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

Что вам понадобится

Чтобы создать div, который можно включать и выключать, вам потребуется следующее:

• Ссылка для управления div путем его включения и выключения при нажатии.
• Div для отображения и скрытия. чтобы сделать div скрытым или видимым.
• JavaScript для выполнения действия.

Контрольная ссылка

Управляющее звено — самая простая часть. Просто создайте ссылку, как на другую страницу.А пока оставьте атрибут href пустой.

Разместите это в любом месте на вашей веб-странице.

Div для отображения и скрытия

Создайте элемент div, который вы хотите показать и скрыть. Убедитесь, что ваш div имеет уникальный идентификатор. В примере уникальный идентификатор выучить HTML.

Это столбец контента. Он начинается пустым, за исключением этого пояснительного текста. Выберите, что вы хотите узнать, в навигационной колонке слева. Текст появится ниже:

Выучить HTML

• Бесплатный HTML-класс
• Учебник по HTML
• Что такое XHTML?

CSS для отображения и скрытия Div

Создайте два класса для вашего CSS: один, чтобы скрыть div, а другой, чтобы показать его. Для этого у вас есть два варианта: отображение и видимость.

Display удаляет div из потока страниц, а видимость просто меняет то, как его видят. Некоторые кодеры предпочитают отображать, но иногда видимость тоже имеет смысл. Например:

Если вы хотите использовать видимость, измените эти классы на:

Добавьте скрытый класс в свой div, чтобы он начинался как скрытый на странице:

JavaScript, чтобы заставить его работать

Все, что делает этот скрипт, это просматривает текущий класс, установленный в вашем div, и переключает его на отображение, если он помечен как скрытый, или наоборот.

Это всего несколько строк JavaScript. Поместите следующее в заголовок вашего HTML-документа (перед

Что делает этот скрипт, построчно:

Вызывает функцию показывать, а также divID это точный уникальный идентификатор, который вы хотите показать или скрыть.

Устанавливает переменную iтем со значением вашего div.

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

Проверяет класс в div. Если это скрытый, он меняет его на нескрытый. В противном случае он меняет его на скрытый.

Закрывает если утверждение.

Закрывает функцию.

Чтобы скрипт заработал, нужно сделать еще одну вещь. Вернитесь к своей ссылке и добавьте javascript в атрибут href. Обязательно используйте точный уникальный идентификатор, который вы назвали своим div в этом href:

Поздравляем! Теперь у вас есть div, который будет отображаться и скрываться всякий раз, когда вы нажимаете на ссылку.

Возможные проблемы, на которые следует обратить внимание

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

JavaScript не включен. Если у ваших читателей нет JavaScript или он отключен, этот скрипт не будет работать. Скрытые div остаются скрытыми независимо от того, что делают ваши читатели. Один из способов исправить это — поместить скрытые элементы div в область noscript, но вам придется поэкспериментировать с этим, чтобы они отображались правильно.

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

Клиенты не понимают. Наконец, клиенты могут не привыкнуть нажимать на ссылку, которая показывает или скрывает контент. Поэкспериментируйте со значками (хорошо работают знаки плюс и стрелки) или текстом, чтобы объяснить, что произойдет с вашими клиентами. Другое решение — оставить один из div открытым, а остальные закрытыми. Это может донести идею до ваших клиентов, чтобы они могли быстрее понять, как открыть оставшийся контент.

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