Prikaži in skrij besedilo ali slike s CSS in JavaScriptom

Ustvarite izkušnjo s stilom aplikacije na svojih spletnih mestih

Dinamični HTML (DHTML) vam omogoča, da na svojih spletnih mestih ustvarite izkušnjo s stilom aplikacije, s čimer se zmanjša pogostost celotnih strani. V aplikacijah, ko kliknete nekaj, se aplikacija takoj spremeni, da prikaže to določeno vsebino ali da vam zagotovi odgovor.

V nasprotju s tem je treba običajno ponovno naložiti spletne strani ali naložiti celotno novo stran. Tako lahko uporabniška izkušnja postane bolj ločena. Vaše stranke morajo počakati na prvo stran, ki jo želite naložiti, in nato počakajte, da se naloži druga stran in tako naprej.

Uporaba & lt; div & gt; izboljšati izkušnje gledalcev

Uporaba DHTML-a je eden od najpreprostejših načinov za izboljšanje te izkušnje, če želite, da se elementi div vključijo ali izključijo, če želite prikazati vsebino, ko jo zahtevate. Element div opredeljuje logične delitve na svoji spletni strani. Pomislite na div kot polje, ki lahko vsebuje odstavke, naslovi, povezave, slike in celo druge divje.

Kaj boste potrebovali

Da bi ustvarili div, ki ga je mogoče vklopiti ali izklopiti, potrebujete naslednje:

Nadzorna povezava

Nadzorna povezava je najlažji del. Preprosto ustvarite povezavo, podobno kot vi, na drugo stran. Zaenkrat pustite atribut href prazen.

Več o HTMLu

To postavite kjerkoli na svojo spletno stran.

Div za prikaz in skrivanje

Ustvarite element div, ki ga želite prikazati in skriti. Prepričajte se, da ima vaš div poseben id na njem. V tem primeru je edinstven ID učni HTML .

To je stolpec vsebine. Začne se prazno, razen tega besedila razlag. Izberi, kaj želite izvedeti v koloni za krmarjenje na levi. Besedilo bo prikazano spodaj:

Več o HTML
  • Prosti razred HTML
  • HTML Tutorial a>
  • Kaj je XHTML?

    CSS, da prikaže in skrije div

    Ustvarite dva razreda za svoj CSS: enega za skrivanje div in drugega za prikaz. Za to imate dve možnosti: prikaz in vidljivost.

    Zaslon odstrani div od toka strani, vidnost pa samo spremeni, kako je viden. Nekateri koderi raje prikazujejo , vendar je včasih tudi občutljivost smiselna. Na primer:

    .prikrito {prikaz: nič; } .unhidden {display: block; }

    Če želite uporabiti vidnost, spremenite te razrede na:

    skriti {vidljivost: skrit; }. neznan {vidljivost: vidna; }

    Dodajte skriti razred svojemu divu, tako da se začne na strani prikazati kot skrito:

    class = "skrito" >

    JavaScript, da bo delal

    V tem skriptu je prikazan trenutni razred, ki je nastavljen na vašem divu, in ga preklopi na neokrnjeno, če je označen kot skrit ali obratno.

    To je le nekaj vrstic JavaScripta. Postavite naslednje v glavo vašega dokumenta HTML (pred oznako :