Показване и скриване на текст или изображения с CSS и JavaScript

click fraud protection

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

За разлика от тях, уеб страниците обикновено трябва да се презареждат или да се зарежда изцяло нова страница. Това може да направи преживяването на потребителя по-разединено. Вашите клиенти трябва да изчакат първата страница да се зареди и след това да изчакат отново втората страница да се зареди и т.н.

Жена, седнала на бюро с лаптоп с външна клавиатура и монитор.
Крис Шмит / E + / Гети изображения

Използване за подобряване на изживяването на зрителя

Използването на DHTML, един от най-лесните начини за подобряване на това изживяване е да имате div елементи се включват и изключват, за да покажат съдържание, когато е поискано. A div елемент определя логически разделения на вашата уеб страница. Представете div като поле, което може да съдържа абзаци, заглавия, връзки, изображения и дори други div.

instagram viewer

Какво ще ви трябва

За да създадете div, който може да се включва и изключва, имате нужда от следното:

  • Връзка за управление на div чрез включване и изключване при щракване.
  • Div за показване и скриване.
  • CSS за да оформите скрития или видимия div.
  • JavaScript за изпълнение на действието.

Контролиращата връзка

Контролиращата връзка е най-лесната част. Просто създайте връзка, както бихте направили към друга страница. Засега оставете атрибут href празно.

Научете HTML

Поставете това навсякъде на вашата уеб страница.

Div за показване и скриване

Създайте елемента div, който искате да покажете и скриете. Уверете се, че вашият div има уникален идентификатор. В примера уникалният идентификатор е научете HTML.


Това е колоната на съдържанието. Започва празно, с изключение на този пояснителен текст. Изберете какво искате да научите в навигационната колона вляво. Текстът ще се появи по-долу:


Научете HTML


  • Безплатен HTML клас
  • HTML урок
  • Какво е XHTML?

CSS за показване и скриване на Div

Създайте два класа за вашия CSS: единият, за да скриете div, а другият, за да го покажете. Имате две възможности за това: дисплей и видимост.

Дисплеят премахва div от потока на страницата и видимостта просто променя начина, по който се вижда. Някои програмисти предпочитат дисплей, но понякога видимост има смисъл също. Например:

.hidden {дисплей: няма; }
.unhidden {дисплей: блок; }

Ако искате да използвате видимост, променете тези класове на:

.hidden {видимост: скрито; }
.unhidden {видимост: видима; }

Добавете скрития клас към вашия div, така че да започне като скрит на страницата:


JavaScript, за да работи

Всичко, което този скрипт прави, е да погледне текущия клас, зададен във вашия div, и да го превключи, за да бъде скрит, ако е маркиран като скрит или обратно.

Това са само няколко реда на JavaScript. Поставете следното в главата на вашия HTML документ (преди.


Какво прави този скрипт, ред по ред:

  1. Извиква функцията покажи, и divID е точно уникалният идентификатор, който искате да покажете или скриете.

  2. Настройва променлива iтем със стойността на вашия div.

  3. Извършва проста проверка на браузъра; ако браузърът не поддържа getElementById, този скрипт няма да работи.

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

  5. Затваря ако изявление.

  6. Затваря функцията.

За да накарате скрипта да работи, трябва да направите още едно нещо. Върнете се към вашата връзка и добавете javascript към атрибута href. Не забравяйте да използвате точния уникален идентификатор, който сте нарекли вашия div в този href:

Научете HTML 

Честито! Вече имате div, който ще се показва и скрива всеки път, когато щракнете върху връзка.

Възможни проблеми, за които да внимавате

Този скрипт не е надежден. Има някои ситуации, в които това може да ви създаде проблеми:

  1. JavaScript не е включен. Ако вашите читатели нямат JavaScript или той е изключен, този скрипт няма да работи. Скритите Divs остават скрити, независимо какво правят вашите читатели. Един от начините да поправите това е да поставите скритите div-и в noscript област, но ще трябва да си поиграете с това, за да ги покажете правилно.

  2. Твърде много съдържание. Това може да бъде чудесен инструмент, който да позволи на вашите читатели да виждат само съдържанието, от което се нуждаят, но ако поставите твърде много в скритите div, това може драстично да повлияе на начина на зареждане на страницата. Не забравяйте, че въпреки че съдържанието не се показва, уеб браузърът все още го изтегля, така че използвайте разумно колко съдържание скривате.

  3. Клиентите не разбират. И накрая, клиентите може да не са свикнали да кликват върху връзка, която показва или скрива съдържание. Поиграйте с икони (плюс знаците и стрелките работят добре) или текст, за да обясните какво ще се случи с вашите клиенти. Друго решение е да оставите един от div отворен, докато другите са затворени. Това може да предаде идеята на вашите клиенти, за да могат те по-бързо да разберат как да отворят останалото съдържание.

Винаги трябва да тествате динамичен HTML като този с клиентите си. След като се почувствате уверени, че те могат да го разберат и използват, това може да бъде чудесен начин да получите голямо количество съдържание на вашите уеб страници, без да заемате много видимо пространство.

instagram story viewer