Rādīt un paslēpt tekstu vai attēlus, izmantojot CSS un JavaScript

Izveidojiet lietojumprogrammu stilu savā tīmekļa vietnē

Dynamic HTML (DHTML) ļauj jums izveidot savas tīmekļa vietnes lietojumprogrammas stilu, tādējādi samazinot frekvenci, kas pilnībā jāielādē visās lapās. Lietojumprogrammās, noklikšķinot uz kaut ko, programma nekavējoties maina, lai parādītu konkrēto saturu vai sniegtu jums atbildi.

Turpretim tīmekļa lapas parasti ir jāpārkrauj vai arī ir jāielādē jauna lapa. Tas var padarīt lietotāju pieredzi izkliedētāku. Jūsu klientiem ir jāgaida pirmās lapas ielāde, un pēc tam vēlreiz jāgaida otrās lapas ielāde un tā tālāk.

Izmantojot & lt; div & gt; uzlabot skatītāja pieredzi

Izmantojot DHTML, viens no vienkāršākajiem veidiem, kā uzlabot šo pieredzi, ir, lai divi elementi tiktu ieslēgti un izslēgti, lai parādītu saturu, kad tas tiek pieprasīts. Div elements definē loģiskos sadalījumus jūsu tīmekļa lapā. Padomājiet par div kā kastīti, kurā var būt punkti, virsraksti, saites, attēli un pat citi divi.

Kas jums būs nepieciešams

Lai izveidotu divu, kuru var ieslēgt vai izslēgt, jums ir nepieciešams:

Kontroles saite

Kontrolējošā saite ir vieglākā daļa. Vienkārši izveidojiet saiti, piemēram, jūs uz citu lapu. Tagad atstājiet href atribūtu tukšu.

Uzziniet HTML

Novietojiet to jebkurā vietā savā tīmekļa lapā.

Div, lai parādītu un paslēptu

Izveidojiet div elementu, kuru vēlaties parādīt un paslēpt. Pārliecinieties, vai divam ir unikāls ID. Piemēram, unikālais ID ir mācīties HTML .

Šis ir satura sleja. Tas sākas tukšs, izņemot šo paskaidrojuma tekstu. Kreisajā navigācijas slejā izvēlieties, ko vēlaties uzzināt. Teksts parādīsies zemāk:

Mācīties HTML
  • Bezmaksas HTML klase
  • HTML Tutorial
  • Kas ir XHTML?

    CSS, lai parādītu un paslēptu Div

    Izveidojiet divas klases jūsu CSS: vienu, lai paslēptu div un otru, lai to parādītu. Jums ir divas iespējas: displejs un redzamība.

    Displejs noņem div no lapas plūsmas, un redzamība tikai maina tā redzamību. Daži programmētāji dod priekšroku ekrānam , bet dažreiz ir arī redzamība . Piemēram:

    .aizspiests {displejs: nav; } .unhidden {display: block; }

    Ja vēlaties izmantot redzamību, tad mainiet šīs klases uz:

    .hidden {redzamība: slēpta; } .unhidden {visibility: visible; }

    Pievienojiet slēptās klases savam div, lai tas sāktu kā slēptu lapā:

    class = "hidden" >

    JavaScript, lai tas darbotos

    Viss šis skripts ir apskatīt pašreizējo klasi, kas iestatīta jūsu div, un pārslēdz to uz nedziedoto, ja tas ir atzīmēts kā slēpts vai otrādi.

    Šī ir tikai dažas JavaScript rindiņas. Ievietojiet HTML koda augšdaļā šādu virsrakstu (pirms tag: