Prikaži i sakrij tekst ili slike s CSS-om i JavaScriptom

Stvorite iskustvo u aplikacijskom stilu na svojim web-lokacijama

Dinamički HTML (DHTML) omogućuje vam stvaranje iskustva u aplikacijskom stilu na web-lokacijama, čime se smanjuje učestalost učitavanja cijelih stranica. U aplikacijama, kada kliknete na nešto, program se odmah mijenja kako bi pokazao određeni sadržaj ili da vam ponudi odgovor.

Nasuprot tome, web-stranice obično moraju biti ponovno učitane ili se mora učitati čitava nova stranica. To može korisničko iskustvo učiniti više odvojenim. Vaši klijenti moraju čekati prvu stranicu za učitavanje, a zatim pričekajte ponovo učitavanje druge stranice i tako dalje.

Upotrebljavajući & lt; div & gt; poboljšati iskustvo gledatelja

Pomoću DHTML-a jedan od najjednostavnijih načina za poboljšanje ovog iskustva jest da se elementi divova uključe i isključe za prikaz sadržaja kada se to zatraži. Element div definira logičke odjeljke na vašoj web stranici. Zamislite div kao okvir koji može sadržavati odlomke, naslove, veze, slike, pa čak i druge divove.

Što vam je potrebno

Da biste izradili div koji se može uključiti i isključiti, trebate sljedeće:

Kontrolna veza

Kontrolna veza je najlakši dio. Jednostavno stvorite vezu kao što biste htjeli na drugu stranicu. Za sada ostavite atribut href prazan.

Saznajte za HTML

Postavite ovo bilo gdje na svojoj web stranici.

Div za prikaz i skrivanje

Izradite element div koji želite prikazati i sakriti. Pobrinite se da vaš div ima jedinstveni ID na njemu. U primjeru, jedinstveni ID je učenje HTML-a .

Ovo je stupac sadržaja. Počinje prazno osim ovog teksta objašnjenja. Odaberite ono što želite naučiti u navigacijskom stupcu s lijeve strane. Tekst će se pojaviti ispod:

Saznajte HTML
  • Besplatna HTML klasa
  • HTML vodič a>
  • Što je XHTML?

    CSS za prikaz i skrivanje Div

    Stvorite dvije klase za svoj CSS: jednu da biste sakrili div i drugu da biste je prikazali. Za to imate dvije mogućnosti: prikaz i vidljivost.

    Zaslon uklanja div od tijeka stranice, a vidljivost samo mijenja način na koji se vidi. Neki koderi preferiraju prikaz , ali ponekad i vidljivost ima smisla. Na primjer:

    .hidden {display: none; } .unhidden {display: blok; }

    Ako želite upotrebljavati vidljivost, promijenite ove teÄŤke na:

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

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

    class = "skriven" >

    JavaScript to Make it Work

    Sva ova skripta jest da pogledate trenutnu klasu postavljenu na vašem divu i prebacujete ga na nju ako je označena kao skrivena ili obratno.

    Ovo je samo nekoliko redaka JavaScripta. Stavite sljedeće u glavu svog HTML dokumenta (prije oznake :