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

Kaip išplėsti ir sutraukti DIV naudojant JavaScript

Kaip išplėsti ir sutraukti DIV naudojant JavaScript

Div elementai leidžia sugrupuoti kitus puslapio elementus. Yra du būdai, kaip juos paslėpti: padaryti nematomus (display:none) arba sutraukti. Nematomas elementas palieka tuščią vietą, o sutrauktas elementas šios vietos nepalieka. Naudojant JavaScript ir mygtuką, galime dinamiškai išskleisti arba suskleisti DIV.

DIV pridėjimas į puslapį

1 žingsnis

Atidarykite norimą HTML dokumentą bet kuriame teksto redaktoriuje (pvz., Notepad).

2 žingsnis

Į <body> sekciją įterpkite šį kodą:

<div id="MyDiv" class="divVisible">
    <p>Div tekstas</p>
</div>
<input id="Button1" type="button" value="Sutraukti / Išplėsti"
       onclick="return toggleDiv()">

Čia sukuriamas div su pastraipa ir mygtukas, kuris iškviečia JavaScript funkciją toggleDiv(). Tekstą Div tekstas galite pakeisti bet kuo norite.

CSS klasės ir JavaScript

1 žingsnis

Į <head> sekciją pridėkite šį CSS kodą:

<style type="text/css">
    .divVisible { display: block; }
    .divHidden  { display: none; }
</style>

Klasė .divVisible rodo elementą, o .divHidden jį slepia.

2 žingsnis

Po CSS kodo įterpkite JavaScript funkciją:

<script type="text/javascript">
    function toggleDiv() {
        var div = document.getElementById('MyDiv');
        if (div.className === 'divVisible') {
            div.className = 'divHidden';
        } else {
            div.className = 'divVisible';
        }
        return false; // neperkrauna puslapio
    }
</script>

3 žingsnis

Išsaugokite failą ir atidarykite jį naršyklėje. Pamatysite pastraipą. Paspauskite mygtuką „Sutraukti / Išplėsti“ – tekstas suskleis, paspaudus dar kartą – išsiskleis. Pastebėsite, kad kiti elementai puslapyje pakyla arba nusileidžia kartu su DIV.


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

Internetas
  • Kaip paskelbti skelbimą Craigslist

    ĮvadasCraigslist – populiariausia internetinių skelbimų platforma, kur daugumą skelbimų galima paskelbti nemokamai (išskyrus darbo pasiūlymus). Jei naudojatės šia svetaine pirmą kartą, čia pateikiami aštuoni paprasti žingsniai, kaip paskelbti norimą skelbimą.Žingsniai1 žingsnisAplankykite craigslist

  • Kaip ištrinti JavaScript failus

    Kaip ištrinti JavaScript failusJavaScript – populiari scenarijų programavimo kalba, plačiai naudojama kuriant dinamiškas internetines svetaines ir įvairias kompiuterines programas. Nors pavadinimas primena Java, ši kalba nėra susijusi su Java. Kartais reikia pašalinti JavaScript failus, kad išvalytu

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