whycomputer.com >> Počítačové znalosti >  >> Internet

Jak rozbalit a sbalit DIV pomocí JavaScriptu

Úvod

Element div slouží k seskupení dalších prvků na webové stránce. Existují dva způsoby, jak „schovat“ div: nastavením visibility:hidden nebo „zhroutěním“ (collapse). První metoda pouze skryje obsah, ale ponechává prázdný prostor. Zhroutěním se tento prostor odstraní a stránka se automaticky přizpůsobí. V tomto návodu si ukážeme, jak pomocí tlačítka a JavaScriptu vytvořit div, který se může rozbalovat i sbalovat.

Přidání DIV do HTML

Krok 1

Otevřete libovolný HTML soubor v editoru (např. Poznámkový blok).

Krok 2

Do těla stránky (<body>) vložte následující kód:

<div id="MyDiv" class="divVisible">
    <p>Text uvnitř divu</p>
</div>
<input id="Button1" type="button" value="Sbalit/Rozbalit" onclick="return toggleDiv()">

Tento kód vytvoří div s odstavcem a tlačítko, které spouští JavaScriptovou funkci toggleDiv(). Text uvnitř div můžete nahradit libovolným obsahem.

Přidání CSS tříd a JavaScriptu

Krok 1 – CSS

Do sekce <head> přidejte následující styl:

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

Třída divVisible zobrazuje element jako blok, divHidden jej skryje a odstraní i místo, které by zabíral.

Krok 2 – JavaScript

Pod CSS (nebo na konci <body>) vložte tento skript:

<script type="text/javascript">
function toggleDiv() {
    var div = document.getElementById('MyDiv');
    if (div.className === 'divVisible') {
        div.className = 'divHidden';
    } else {
        div.className = 'divVisible';
    }
    return false; // zabrání odeslání formuláře, pokud je tlačítko uvnitř 
} </script>

Funkce zjistí aktuální třídu div a přepne ji mezi divVisible a divHidden při každém kliknutí.

Krok 3 – Testování

Uložte soubor a otevřete jej v prohlížeči. Po načtení uvidíte text uvnitř div. Kliknutím na tlačítko „Sbalit/Rozbalit“ text zmizí a místo, kde byl, se uvolní. Dalším kliknutím se text opět objeví a okolní prvky se posunou dolů.


URL:https://cs.whycomputer.com/Internet/100106624.html

Internet
  • Jak snadno zveřejnit inzerát na Craigslist

    Craigslist je největší online portál pro klasifikované inzeráty, kde můžete zdarma zveřejnit své nabídky (kromě pracovních pozic). Pokud s tímto systémem teprve začínáte, následujte osm jednoduchých kroků. Krok 1 Navštivte craigslist.org/about/sites a vyberte oblast, ve které chcete inzerát umístit.

  • Jak odstranit soubory JavaScript

    Úvod JavaScript je populární skriptovací jazyk, který se používá k vytváření dynamických webových stránek i v mnoha počítačových aplikacích. Navzdory podobnému názvu s jazykem Java není JavaScript s ním spojen. Odstranění souborů JavaScript je užitečné, pokud chcete odstranit nechtěné skripty nebo u

Počítačové znalosti © https://cs.whycomputer.com