Cum file pe jquery, JavaScript

Cum filele jQuery

Bună ziua tuturor! Astăzi vom arăta cum să facă filele (le filelor) folosind jQuery. Taba este un lucru destul de popular în web modern, astfel încât orice persoană care se respectă ar trebui să știe cum să le facă. Să mergem.

Voi încerca totul pentru a picta unele detalii, că nu a existat nici o neînțelegere. Nerăbdătoare poate vedea imediat exemplu viu.

Deci, în primul rând avem nevoie de HTML. De exemplu, vom avea doar 3 Taba (respectiv, și 3 tipuri de conținut). Scrieți următorul cod:

Vă rugăm să rețineți că numele ancora link-uri Taba sootvestsvuet id Diva.

Acum, adaugă stil pe gustul tau aici:

Trebuie să spun că astăzi am inventat o bicicletă (plug-in-uri pentru un număr foarte mare de tab-uri), dar uite cum selectorii jQuery. Inca un avantaj este faptul că, atunci când JS este oprit utilizatorul va vedea în continuare informațiile din filele.

Co-fondator Vremenno.net. Interesat de afaceri online, design, gradul de utilizare și programare client. Participa la dezvoltarea mai multor proiecte pe internet.

Uneori, el a scris în Twitter. dar mai mult pe Vremenno.net.

. TabContainers.hide () filtru ( ': eq (' + saved_tab + ')') arată () ;.
$ ( 'Div.tabs ul.tabNavigation a'). Faceți clic (function ()

Pentru a evita acest lucru, este posibil să se infasoara fiecare dintre grupurile de unități în div cu unele Haydee, de exemplu:

Și apoi pentru fiecare bloc apela în mod individual o funcție de genul:

$ (Function () var tabContainers = $ ( 'div.tabs> div');
.. TabContainers.hide () filtru ( ': mai întâi') arată ();
$ ( 'Li Div.tabs ul.tabNavigation') clic (funcția () tabContainers.hide () .;
tabContainers.filter (this.hash) .show ();
$ ( 'Li Div.tabs ul.tabNavigation') removeClass ( 'hover') .;
$ (Aceasta) .addClass ( 'Hover');
return false;
..>) Filtru ( ': primul') clic ();
>);

Se arată în acest exemplu, codul:

Pentru a lucra filele utilizate ca și codul afișat aici: