Plasarea blocurilor ascunse de text îmbunătățește percepția vizuală a unei pagini de site - acesta se încarcă în browser exact așa cum a proiectat-o designerul, indiferent de cantitatea de informații postate. În plus, este mai convenabil pentru vizitator - în căutarea blocului necesar de informații, el nu trebuie să caute prin întreaga gamă, ci doar mici „vârfuri ale aisbergurilor”.
Este necesar
Cunoștințe de bază despre HTML și JavaScript
Instrucțiuni
Pasul 1
Utilizați o funcție JavaScript personalizată pentru a ascunde și a afișa blocurile de text dorite într-o pagină HTML. O funcție comună pentru toate blocurile este mult mai convenabilă decât adăugarea de cod la fiecare dintre ele separat. În partea de antet a codului sursă al paginii, plasați etichetele de script de deschidere și de închidere și creați între ele o funcție goală cu un nume, de exemplu, swap și un parametru de intrare necesar id: swap de funcție (id) {}
Pasul 2
Adăugați două linii de cod JavaScript în corpul funcției, între acoladele. Prima linie ar trebui să citească starea curentă a blocului de text - indiferent dacă vizibilitatea acestuia este activată sau dezactivată. Pot exista mai multe astfel de blocuri într-un document, deci fiecare trebuie să aibă propriul identificator - funcția sa primește id ca singur parametru de intrare. Folosind acest identificator, caută blocul necesar în document, atribuind valoarea de vizibilitate / invizibilitate (starea proprietății de afișare) variabilei sDisplay: sDisplay = document.getElementById (id).style.display;
Pasul 3
A doua linie ar trebui să schimbe proprietatea de afișare a blocului de text dorit în opus - ascundeți dacă textul este vizibil și arătați dacă este ascuns. Acest lucru se poate face cu următorul cod: document.getElementById (id).style.display = sDisplay == 'none'? '': 'nici unul';
Pasul 4
Adăugați următoarea foaie de stil în secțiunea antet: a {cursor: pointer} Veți avea nevoie de aceasta pentru a afișa corect indicatorul mouse-ului atunci când treceți peste o etichetă de link incompletă. Cu ajutorul unor astfel de linkuri, organizați în pagină pentru a comuta vizibilitatea / invizibilitatea blocurilor de text.
Pasul 5
Plasați aceste legături de comutare în text înaintea fiecărui bloc ascuns, iar în blocurile de la sfârșitul textului, adăugați un link similar. Includeți text invizibil în etichete span care au invizibilitatea setată în atributele lor de stil. De exemplu: Extindeți textul +++ Acesta este text ascuns --- În acest exemplu, făcând clic pe un link cu trei plus, se va apela funcția de mai sus la evenimentul onClick, trecându-i ID-ul blocului care urmează să fie vizibil. Și în interiorul blocului există un link de trei minusuri cu aceleași funcții - făcând clic pe acesta se va ascunde textul.
Pasul 6
Creați numărul necesar de blocuri de text, similar cu cel descris în pasul anterior, amintindu-vă să modificați ID-urile din atributul id al etichetei span și din variabila transmisă funcției de evenimentul onClick din cele două linkuri.
