A rejtett szövegblokkok elhelyezése javítja a webhely oldalának vizuális érzékelését - pontosan úgy töltődik be a böngészőbe, ahogy a tervező tervezte, függetlenül a közzétett információk mennyiségétől. Ezenkívül kényelmesebb a látogató számára - a szükséges információs blokkot keresve nem a teljes tömböt kell átnéznie, hanem csak apró "jéghegyek csúcsait".
Szükséges
HTML és JavaScript alapismeretek
Utasítás
1. lépés
Használjon egyedi JavaScript-funkciót a kívánt szövegblokkok elrejtésére és megjelenítésére egy HTML-oldalon. Az összes blokk közös funkciója sokkal kényelmesebb, mint kódot hozzáadni mindegyikhez külön-külön. Az oldal forráskódjának fejlécében helyezze el a nyitó és a záró szkript címkéket, és ezek között hozzon létre egy üres függvényt névvel, például csere és egy szükséges bemeneti paraméter azonosítója: function swap (id) {}
2. lépés
Adjon két sor JavaScript-kódot a függvény törzséhez, a göndör zárójelek közé. Az első sorban olvasható a szövegblokk aktuális állapota - függetlenül attól, hogy a láthatóság be vagy ki van kapcsolva. Több ilyen blokk lehet egy dokumentumban, ezért mindegyiknek meg kell lennie a saját azonosítójának - az ő függvénye kapja meg az id-t egyetlen bemeneti paraméterként. Ezen azonosító használatával megkeresi a szükséges blokkot a dokumentumban, hozzárendelve a láthatóság / láthatatlanság értékét (a megjelenítési tulajdonság állapota) az sDisplay változóhoz: sDisplay = document.getElementById (id).style.display;
3. lépés
A második sornak meg kell változtatnia a kívánt szövegblokk megjelenítési tulajdonságát az ellenkezőjével - elrejteni, ha a szöveg látható, és megmutatni, ha rejtve van. Ezt a következő kóddal lehet megtenni: document.getElementById (id).style.display = sDisplay == 'nincs'? '': 'egyik sem';
4. lépés
Adja hozzá a következő stíluslapot a fejléc szakaszhoz: a {cursor: pointer} Erre szüksége lesz, hogy az egérmutatót helyesen jelenítse meg, amikor egy hiányos hivatkozási címke fölé viszi az egérmutatót. Ilyen linkek segítségével az oldalon rendezheti a szövegblokkok láthatóságának / láthatatlanságának átkapcsolását.
5. lépés
Helyezze ezeket a váltó linkeket a szövegbe minden elrejtett blokk elé, és a szöveg végén található blokkokban adjon hozzá hasonló linket. Zárjon láthatatlan szöveget olyan span címkékbe, amelyek stílusattribútumaiban láthatatlanság van megadva. Például: Szöveg kibontása +++ Ez a rejtett szöveg --- Ebben a példában egy három plusz hivatkozásra kattintva a fenti függvényt hívják meg az onClick eseményen, továbbítva a látható blokk azonosítóját. A blokk belsejében található egy három mínusz link, ugyanazokkal a funkciókkal - ha rákattint, elrejti a szöveget.
6. lépés
Hozza létre a szükséges számú szövegblokkot, hasonlóan az előző lépésben leírtakhoz, ne felejtse el megváltoztatni az azonosítókat a span címke id attribútumában és az onClick esemény által a függvénynek átadott változóban a két hivatkozásban.
