Jquery tabs

Jquery tabs


Dacă aveți o mulțime de informații, dar nu există spațiu liber pe site, atunci cea mai bună soluție la această problemă este crearea de file jQuery. Feretele jQuery ascund o parte din conținut, ocupând mult mai puțin spațiu.







1. În primul rând, trebuie să creați o structură HTML pentru filele viitoare.

2. Acum trebuie să utilizați jQuery pentru a vă ascunde

containere. Pentru a face acest lucru, scrieți următorul cod în fișierul scripts.js:

Acum, după încărcarea paginii, utilizatorul va vedea numai lista formată din linkuri!

Acum când faceți clic pe un link, trecerea la acesta nu va fi făcută, de fapt, pentru această acțiune și răspunde la prevenireDefault.







4. Apoi, trebuie să vă asigurați că atunci când faceți clic pe link, este afișat containerul corespunzător cu conținutul. Pentru a face acest lucru, adăugați $ (this.hash) .show () înainte de e.preventDefault de la elementul anterior.

Construcția $ (this.hash) .show () înseamnă că atunci când faceți clic pe un link, trebuie să afișați un container al cărui id este același cu valoarea href a linkului. Hash - returnează valoarea href a link-ului. Cu alte cuvinte, dacă faceți clic pe un link care are parametrul href = "# description", constructul $ (this.hash) .show () este echivalent cu $ (# description) .show ().

6. Toate, codul principal pentru filele jQuery este scris și filele au un aspect finit. Rămâne doar să adăugăm stiluri css fișierului stiles.css atașat:

7. După adăugarea stilurilor, filele arată frumos, dar nu este clar care este activ în acest moment. Puteți remedia acest lucru adăugând o clasă specială în fila activă:

În fișierul styles.css, adăugați o clasă:

8. atingere finală: asigurați-vă că atunci când se încarcă pagina, prima jQuery tabă devine activă. Adăugați filtrul (': primul'). Faceți clic pe ():

Folosiți mai întâi filtrul și clasa pseudo-clasă. vom face automat clic pe prima filă, imediat după încărcarea paginii. JQuery tab-urile noastre sunt gata!








Trimiteți-le prietenilor: