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

Създайте опит в стил на приложение на уебсайтовете си

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

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

Използвайки
да подобрите практическата работа на зрителите

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

Това, от което се нуждаете

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

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

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

Научете HTML

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

Div да покаже и скрие

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

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

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

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

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

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

    .disabled {display: none; }. Неизвестен {display: block; }

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

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

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

    class = "hidden" >

    JavaScript, за да го накара да работи

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

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