Ako rozbaliť a zbaliť DIV v skripte JavaScript

Divs vám umožňuje zoskupovať prvky na webovej stránke. Existujú dva spôsoby, ako spôsobiť, že divy na webovej stránke zmiznú. Najprv si kód rozdelí na neviditeľný prvok, alebo môžete použiť zbalenie. Ak div jednoducho zviditeľníte, zostane tam prázdne miesto. Zbalením prvku div sa odstráni toto prázdne miesto a nezostane na vašej webovej stránke žiadny otvor. Pomocou JavaScriptu prepojeného s tlačidlom vytvoríte svoje vlastné oddiely, ktoré sa zbalia a rozbalia, keď používatelia kliknú na tlačidlo.

Pridať položku Div na webovú stránku

Krok 1

Spustite Poznámkový blok a otvorte ľubovoľný z vašich dokumentov HTML.

Krok 2

Pridajte tento blok kódu HTML do časti „telo“ dokumentu:

Div text

Tento kód vytvára div a tlačidlo. Div obsahuje odsek s textom, ktorý znie: „Div text.“ Nahraďte tento text čokoľvek, čo sa vám páči. „Tlačidlo“ vyvolá po kliknutí funkciu JavaScript. Táto funkcia spôsobí, že sa div prepne medzi zbaleným a rozšíreným stavom.

Vyhľadajte vlastnosti „id“ a „class“ v značke div. Ak chcete vytvoriť rozširujúcu sa a zrútiteľnú div, musíte div prideliť id hodnotu. V tomto príklade je táto hodnota „MyDiv“. "The div also has a class property.", 3, [[V tomto prípade je hodnota tejto vlastnosti „divVisible“. Toto je názov triedy CSS definovanej v ďalšej časti.

Pridanie tried CSS a JavaScriptu

Krok 1

Pridajte nasledujúci oddiel CSS do časti „hlava“ v dokumente: Toto vytvorí triedu „divVisible“ a ďalšiu triedu s názvom „divHidden“. Trieda „divVisible“ nastaví svoju zobrazenú hodnotu na „block“. Hodnota „block“ zviditeľní akýkoľvek prvok HTML, ktorý odkazuje na triedu a rozširuje ju tak, aby zaberala miesto na webovej stránke. Trieda „divHidden“ nastaví svoju zobrazenú hodnotu na „none“. Akýkoľvek prvok HTML odkazujúci na túto triedu sa zbalí a nezanecháva žiadne miesto.

Krok 2

Pridajte tento kód JavaScript pod kód CSS: Premenná divID obsahuje hodnotu id div, ktorý chcete zbaliť a rozšíriť. Táto hodnota je „MyDiv“. Zvyšok kódu získa aktuálny názov triedy CSS div a prepne ho pri každom spustení kódu. Pri prvom spustení kódu sa názov triedy div zmení na „divHidden“. Pri druhom spustení zmení názov triedy späť na „divVisible“.

Krok 3

Uložte dokument HTML a otvorte ho v prehliadači. Zobrazí sa odsek obsahujúci váš odsek.

Kliknite na tlačidlo "Zbaliť /rozbaliť". Text sa zbalí. Opätovným kliknutím na tlačidlo rozbalíte text. Všimnite si, ako sa tlačidlo a ďalšie prvky pod textom pohybujú smerom nahor, keď sa text zbalí, a smerom dole, keď sa text rozširuje

• Predchádzajúca strana: Ako povoliť chyby jazyka JavaScript v prehliadači IE
• Ďalšia strana: How to Register QuickBooks