Näytä ja piilota tekstiä tai kuvia CSS: llä ja JavaScriptilla

Luo sovellustyyppinen kokemus verkkosivustoillesi

Dynaamisella HTML (DHTML) -ominaisuudella voit luoda sovellustyyppisen käyttökokemuksen verkkosivustoillesi pienentämällä koko sivujen täysien latauskertojen tiheyttä. Sovelluksissa, kun napsautat jotain, sovellus muuttuu välittömästi näyttämään tietyn sisällön tai antaa sinulle vastauksen.

Sitä vastoin verkkosivuja on tavallisesti ladattava tai ladattava koko uusi sivu. Tämä voi helpottaa käyttäjän kokemusta. Asiakkaasi on odotettava, että ensimmäinen sivu ladataan ja odota taas toisen sivun lataamista ja niin edelleen.

Käyttämällä & lt; div & gt; parantaa katsojan kokemusta

DHTML-tekniikan avulla yksi helpoimmista tavoista parantaa tätä kokemusta on, että div- elementit siirtyvät päälle ja pois päältä näyttämään sisällön, kun sitä pyydetään. Div-elementti määrittää loogiset jakautumat verkkosivustollesi. Ajattele div-laatikkoa, joka voi sisältää kappaleita, otsikoita, linkkejä, kuvia ja jopa muita div.

Mitä tarvitset

Jotta voit luoda jakson, joka voidaan kytkeä päälle ja pois päältä, tarvitset seuraavaa:

Controlling Link

Ohjaava linkki on helpoin osa. Luo vain sellainen linkki kuin toiselle sivulle. Jätä nyt href-attribuutti tyhjäksi.

Opi HTML

Aseta tämä missä tahansa verkkosivustossasi.

Div näyttää ja piilottaa

Luo div-elementti, jonka haluat näyttää ja piilottaa. Varmista, että divilla on ainutlaatuinen tunnus siitä. Esimerkissä yksilöivä tunnus on oppia HTML .

Tämä on sisällön sarake. Se alkaa tyhjästä lukuun ottamatta tätä selitystekstiä. Valitse mitä haluat oppia vasemmalla olevasta navigointisarakkeesta. Teksti näkyy alla:

Opi HTML
  • Ilmainen HTML-luokka
  • HTML-opetusohjelma a>
  • Mikä on XHTML?

    CSS näyttää ja piilottaa Div

    Luo kaksi luokkaa CSS: lle: yksi piilottaaksesi div ja toinen sen näyttämiseksi. Sinulla on kaksi vaihtoehtoa: näyttö ja näkyvyys.

    Näyttö poistaa div sivuvirrasta ja näkyvyys muuttaa vain sen näkymistä. Jotkin kooderit mieluummin näyttävät , mutta joskus näkyvyys on myös järkevää. Esimerkiksi:

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

    Jos haluat käyttää näkyvyyttä, muuta kyseiset luokat osoitteeseen:

    .hidden {näkyvyys: piilotettu; }. unhidden {näkyvyys: näkyvissä; }

    Lisää piilotettu luokka diville niin, että se alkaa sivulta piilotettuna:

    class = "piilotettu" >

    JavaScript, jotta se toimisi

    Kaikki tämä käsikirjoitus on tarkastella nykyistä luokkaasi, joka on asetettu diveseesi ja vaihtaa sen unhidden, jos se on merkitty piilotettuna tai päinvastoin.

    Tämä on vain muutama JavaScript-rivi. Aseta seuraava teksti HTML-asiakirjan päähän (ennen -tunnistetta: