Dinamikus HTML (DHTML) lehetővé teszi alkalmazás-stílusú élmény létrehozását a webhelyeken, ezzel csökkentve a teljes oldalak teljes betöltésének gyakoriságát. Az alkalmazásokban, amikor rákattint valamire, az alkalmazás azonnal megváltozik, hogy megmutassa az adott tartalmat, vagy megadja a választ.
Ezzel szemben a weboldalakat általában újratölteni kell, vagy egy teljesen új oldalt kell betölteni. Ezáltal a felhasználói élmény szétválhat. Ügyfeleinek meg kell várniuk az első oldal betöltését, majd újra meg kell várniuk a második oldal betöltését stb.
A nézői élmény javítása
A DHTML használatával ennek az élménynek a javítása az egyik legegyszerűbb módszer div elemek be- és kikapcsolása a tartalom megjelenítéséhez, amikor azt kérik. A div elem meghatározza a weboldal logikai felosztását. Gondoljon a div-re mint olyan dobozra, amely tartalmazhat bekezdéseket, címsorokat, linkeket, képeket és még más div-eket is.
Amire szüksége lesz
A be- és kikapcsolható div létrehozásához a következőkre van szükség:
- Link, amely a div vezérlésére kattintással be- és kikapcsolhatja.
- A div megmutatni és elrejteni.
- CSS a div rejtett vagy látható stílusához.
- JavaScript a művelet végrehajtásához.
A vezérlő link
A vezérlő link a legegyszerűbb rész. Egyszerűen hozzon létre egy linket, mint egy másik oldalra. Egyelőre hagyja el a href attribútum üres.
Tanuljon HTML-t
Helyezze el ezt bárhol a weboldalán.
A Div megmutatni és elrejteni
Hozza létre a megjeleníteni és elrejteni kívánt div elemet. Győződjön meg arról, hogy a div-jének egyedi azonosítója van. A példában az egyedi azonosító az megtanulják a HTML-t.
Ez a tartalom oszlop. Ez a magyarázó szöveg kivételével üresen indul. Válassza ki, mit szeretne tanulni a bal oldali navigációs oszlopban. A szöveg alább jelenik meg:
Tanuljon HTML-t
- Ingyenes HTML osztály
- HTML bemutató
- Mi az XHTML?
A CSS megmutatja és elrejti a Div
Hozzon létre két osztályt a CSS-hez: az egyik a div elrejtéséhez, a másik pedig a megjelenítéséhez. Ennek két lehetősége van: megjelenítés és láthatóság.
A kijelző eltávolítja a div-et az oldalfolyamatból, és a láthatóság csak megváltoztatja a látását. Néhány kódoló inkább kijelző, de néha láthatóság értelme is van. Például:
.hidden {display: none; }
.unhidden {display: block; }
Ha használni szeretné a láthatóságot, akkor változtassa meg ezeket az osztályokat:
.rejtve {láthatóság: rejtett; }
.fedetlen {láthatóság: látható; }
Adja hozzá a rejtett osztályt a div-hez, hogy az rejtve kezdődjön az oldalon:
JavaScript, hogy működjön
Ez a szkript csak annyit tesz, hogy megnézi a div osztályának aktuálisan beállított osztályát, és rejtettre váltja, ha rejtettként van jelölve, vagy fordítva.
Ez csak néhány sor JavaScript. Helyezze a következőket a fejébe HTML dokumentum (előtte.
Mit csinál ez a szkript, soronként:
Meghívja a függvényt elrejteni, és divID a pontos egyedi azonosító, amelyet meg akar mutatni vagy elrejteni.
Az i változó beállításatem a div értékével.
Egyszerű böngészőellenőrzést hajt végre; ha a böngésző nem támogatja getElementById, ez a szkript nem fog működni.
Ellenőrzi az osztályt a div. Ha ez rejtett, megváltoztatja leplezetlen. Egyébként megváltoztatja rejtett.
Bezárja a ha nyilatkozat.
Bezárja a funkciót.
A szkript működése érdekében még egyet kell tennie. Térjen vissza a linkjéhez, és adja hozzá a javascriptet a href attribútumhoz. Ügyeljen arra, hogy pontosan azt az egyedi azonosítót használja, amelyet a divének ebben a href-ben nevezett el:
Tanuljon HTML-t
Gratulálunk! Most van egy div, amely megjelenik és elrejt, amikor egy linkre kattint.
Lehetséges problémák, amelyekre figyelni kell
Ez a szkript nem bolondbiztos. Vannak olyan helyzetek, amelyekben problémákat okozhat az Ön számára:
A JavaScript nincs bekapcsolva. Ha olvasóinak nincs JavaScript-je, vagy ki van kapcsolva, akkor ez a szkript nem fog működni. A rejtett div-ek rejtve maradnak, bármit is csinálnak az olvasói. Ennek egyik módja az, ha a rejtett div-eket egy noscript területre helyezi, de ezt el kell játszania ahhoz, hogy megfelelő módon jelenjenek meg.
Túl sok tartalom. Ez nagyszerű eszköz lehet arra, hogy az olvasók csak a szükséges tartalmat lássák, de ha túl sokat tesz be a rejtett div-ekbe, az drasztikusan befolyásolhatja az oldal betöltését. Ne feledje, hogy annak ellenére, hogy a tartalom nem jelenik meg, a webböngésző továbbra is letölti azt, ezért legyen józan ész, hogy mennyi tartalmat rejt.
Az ügyfelek nem értik. Végül előfordulhat, hogy az ügyfelek nem szoktak rákattintani egy linkre, amely tartalmat mutat vagy elrejt. Játsszon ikonokkal (a pluszjelek és a nyilak jól működnek) vagy szöveggel, hogy elmagyarázza, mi fog történni az ügyfelekkel. Egy másik megoldás az egyik div nyitva hagyása, míg a többi zárva. Ez át tudja adni az ötletet az ügyfeleknek, így gyorsabban kitalálhatják, hogyan nyissák meg a fennmaradó tartalmat.
Mindig tesztelje az ügyfelekkel az ilyen dinamikus HTML-t. Miután biztos benne, hogy megértik és felhasználják, ez nagyszerű módja lehet annak, hogy nagy mennyiségű tartalmat szerezzen be weboldalaira anélkül, hogy sok látható helyet foglalna el.