Prikažite i sakrijte tekst ili slike pomoću CSS-a i JavaScript-a

Stvorite iskustvo u stilu aplikacije na svojim veb lokacijama

Dinamički HTML (DHTML) vam omogućava kreiranje iskustva u stilu aplikacija na vašim web stranicama, smanjujući učestalost čitavih stranica u potpunosti učitati. U aplikacijama, kada kliknete na nešto, aplikacija se odmah menja da bi pokazala taj određeni sadržaj ili da vam pruži odgovor.

Za razliku od toga, web stranice obično moraju biti ponovo učitane, ili se mora učitati cela nova stranica. Ovo može učiniti korisničko iskustvo više razdvojeno. Vaše stranke moraju da sačekaju prvu stranicu koja se učita, a zatim sačekajte ponovo za učitavanje druge stranice i tako dalje.

Korišćenje & lt; div & gt; poboljšati iskustvo gledača

Korišćenjem DHTML-a, jedan od najlakših načina za poboljšanje ovog iskustva jeste da se div- elementi uključuju i isključe kako bi prikazali sadržaj kada se to zatraži. Element div određuje logičke podele na vašoj web stranici. Zamislite div kao kutiju koja može sadržavati paragrafe, naslove, veze, slike, pa čak i druge dive.

Ono što ćete mi trebati

Da biste kreirali div koji se može uključiti i isključiti, potrebno je sledeće:

Kontroling Link

Kontrolni link je najlakši deo. Jednostavno napravite vezu kao što biste hteli na drugu stranicu. Za sada ostavite href atribu praznim.

Saznajte HTML

Stavite ovo bilo gde na svoju veb stranicu.

Div da prikaže i sakrije

Kreirajte element div koji želite prikazati i sakriti. Uverite se da vaš div ima jedinstveni id na njemu. U primjeru, jedinstveni id je učiti HTML .

Ovo je kolona sadržaja. Počinje prazno, osim ovog objašnjenja. Izaberite ono što želite da naučite u koloni za navigaciju sa leve strane. Tekst će se pojaviti ispod:

Saznajte HTML
  • Besplatna HTML klasa
  • HTML Tutorial a>
  • Šta je XHTML?

    CSS će prikazati i sakriti div

    Kreirajte dve klase za svoj CSS: jedan da sakrije div i drugi da ga pokaže. Za to imate dve mogućnosti: prikaz i vidljivost.

    Displej uklanja div od toka stranice, a vidljivost samo menja kako se vidi. Neki koderi preferiraju prikaz , ali ponekad i vidljivost ima smisla. Na primjer:

    .prikrivena {display: none; } .unhidden {display: block; }

    Ako želite da koristite vidljivost, onda promenite ove klase na:

    .prikrivena {vidljivost: skrivena; } .unhidden {vidljivost: vidljiva; }

    Dodajte skrivenu klasu u svoj div, tako da počinje kao sakriveno na stranici:

    class = "hidden" >

    JavaScript da radi

    Sva ova skripta čini pogled na trenutnu klasu postavljenu na vašem divu i prebacuje je na ne-skriveno ako je označeno kao skriveno ili obrnuto.

    Ovo je samo nekoliko redova JavaScripta. Postavite sledeće u glavu vašeg HTML dokumenta (prije oznake :