whycomputer.com >> Interneto žinios >  >> Internetas

Kaip sukurti išskleidžiamą DIV elementą su CSS ir JavaScript

Naudodami išskleidžiamus DIV elementus, lankytojai gali peržiūrėti papildomą turinį nepalikdami dabartinio puslapio. Tokie elementai leidžia sukurti puslapį su daugybe išplečiamų antraščių, kuriose rodomi tik vartotojo pasirinkti duomenys, o ne ilgos tekstų sekos. Tai pagerina naršymo patogumą ir padidina svetainės vertę kaip informacijos šaltinį.

Žingsnis 1 – Sukurkite paslėptą turinį

Į <body> sekciją įterpkite <div id=\"myContent\"> elementą, kuriame yra rodomas tekstas. Pradžioje nustatykite jo matomumą į display:none:

<div id=\"myContent\" style=\"display:none;\">
    <h3>Iškylantis tekstas<br>Kaip tai atrodo?</h3>
</div>

Žingsnis 2 – Pridėkite nuorodą, kuri išskleidžia turinį

Sukurkite nuorodą, kuri paleidžia JavaScript funkciją:

<a href=\"javascript:void(0);\" onclick=\"toggleDiv('myContent');\">Spustelėkite, kad išskleistumėte</a>

Žingsnis 3 – JavaScript funkcija

Į <head> sekciją įdėkite šią funkciją, kuri perjungia display savybę:

<script>
function toggleDiv(id) {
    var el = document.getElementById(id);
    if (el.style.display === \"none\") {
        el.style.display = \"block\";
    } else {
        el.style.display = \"none\";
    }
}
</script>

Patarnimas

  • Tekstas „Spustelėkite, kad išskleistumėte“ rodomas nuorodoje. Pirmą kartą spustelėjus, pasirodo turinys „Iškylantis tekstas – Kaip tai atrodo?“, o antrą kartą turinys vėl paslepia.

URL:https://lt.whycomputer.com/internetas/100407853.html

Internetas
  • Kaip sukurti koliažą naudojant Photobucket

    Photobucket – tai internetinė platforma, leidžianti lengvai įkelti, saugoti ir dalintis skaitmeniniais nuotraukų failais. Pasirinkus patogią sąsają, galite redaguoti nuotraukas, kurti albumus ir, svarbiausia, gaminti profesionaliai atrodančius koliažus, kuriuos vėliau galėsite atspausdinti.1 žingsni

  • Kaip Microsoft Word programoje sukurti stulpelius su linijomis

    Kuriant naujienlaiškį ar brošiūrą, didelis teksto blokas gali būti nuobodus ir net erzinantis. Geriau, kai tekstas išdėstytas taupantį vietą ir estetiškai patraukliuose stulpeliuose. Microsoft Word suteikia galimybę lengvai sukurti vienodus stulpelius su tarpinėmis vertikalinėmis linijomis, suteikia

Interneto žinios © https://lt.whycomputer.com