Pentru a îmbunătăți percepția conținutului dvs. de către utilizator, acesta poate fi împărțit în tab-uri. Practic, ele sunt utilizate pe scară largă în magazinele online pe pagina produsului, pentru afișarea compactă a descrierii, caracteristicilor și recenziilor.
Dar nimeni nu te limitează la folosirea filelor, principalul lucru este să știi cum sunt create, despre ce vorbim astăzi
Caracteristica principală a filelor este funcționalitatea acestora. Pentru utilizator, toate numele de file sunt vizibile, dar sunt afișate conținutul unei singure fila active.
Pentru a implementa această funcție a filelor, vom folosi biblioteca jQuery.
Structura HTML a fișierelor jQuery
Din punct de vedere structural, filele noastre sunt o listă a legăturilor ancorate și a blocurilor cu conținut.
Acesta este modul în care jQuery Tabs arată fără stiluri și scripturi:
Stiluri CSS pentru filele jQuery
Cu stiluri pentru jQuery Tabs, toată lumea de aici poate face așa cum dorește. Exista un moment cu afisarea de blocuri cu continut, am decis sa nu le ascund cu ajutorul stilurilor, ci sa fac asta printr-un script. Există un motiv pentru acest lucru, în cazul în care scriptul nu sa încărcat sau utilizatorul a deconectat suportul de script-uri în browser-ul dvs., conținutul jQuery Tabs va fi afișat și filele noastre vor funcționa ca link-urile de ancoră obișnuite.
În exemplul meu, am decis să fac un stil minimal, pentru a nu complica chiar sarcina de a implementa jQuery Tabs.
Avem nevoie, cu ajutorul stilurilor, să construim o listă de link-uri (tab-uri) într-o singură linie și să oferim o vedere holistică.
Aici sunt literalmente 8 linii de cod și filele noastre au avut un aspect ușor de recunoscut. va continua
Script jQuery Tabs
Ultimul pas este scrierea unui script mic, astfel încât filele noastre să funcționeze corect.
Trebuie să facem:
1. Ascundeți tot conținutul și afișați conținutul primei filuri (am scris despre acest lucru mai devreme că ascundem conținutul filelor cu un script, nu cu stilurile);
2. Legați un eveniment clic pe tab, când fila pe care ați făcut clic devine activă (se adaugă clasa activă) și se afișează conținutul filei.
Asta-i toate sarcinile.
Articole similare
Trimiteți-le prietenilor: