JQuery fülek - lapok létrehozása
A tartalom felhasználó általi észlelésének javítása érdekében lapokra bontva lehet. Alapvetően széles körben használják a termékoldalon lévő online áruházakban a leírás, a jellemzők és a vélemények áttekinthető megjelenítéséhez.
De senki sem korlátozza a lapok használatát, a legfontosabb dolog az, hogy tudják, hogyan jönnek létre, amit ma beszélünk
A fülek fő jellemzője azok funkcionalitása. A felhasználó számára minden fül neve látható, de csak egy aktív fül jelenik meg.
A füleink ezen funkcióinak megvalósításához a jQuery könyvtárat használjuk.
A jQuery fülek HTML szerkezete
Szerkezetileg a mi füleink a horgonyhivatkozások és a tartalmat tartalmazó blokkok listája.
Így néz ki a jQuery lapok stílusok és szkriptek nélkül:
CSS stílusok a jQuery fülekhez
A jQuery lapok stílusaival mindenki itt megteheti a kívánságait. Van egy pillanat a tartalommal rendelkező blokkok megjelenítésével, úgy döntöttem, hogy nem akarom elrejteni őket stílusok segítségével, hanem egy scripten keresztül. Ennek oka van, abban az esetben, ha a szkript nem töltötte be, vagy a felhasználó szétkapcsolta a szkriptek támogatását a böngészőben, megjelenik a jQuery lapok tartalma, és a füleink a szokásos horgonyhivatkozásokhoz hasonlóan fognak működni.
Az én példámban úgy döntöttem, hogy minimalizálom a stílusokat, hogy ne bonyolítsam a jQuery Tabs megvalósításának legfontosabb feladatait.
Stílusok segítségével össze kell állítanunk a linkek listáját (tabulátorok) egy sorban, és mindent meg kell adnunk holisztikus nézetnek.
Itt van szó szerint 8 sornyi kód, és a lapok felismerhető megjelenést kaptak. továbbra
Script jQuery fülek
Az utolsó lépés egy kis szkript írása, hogy füleink megfelelően működjenek.
Tennünk kell:
1. Az összes tartalom elrejtése és az első lap tartalmának megjelenítése (korábban ezt írtam, hogy a lapok tartalmát szkripttel elrejtjük, nem pedig stílusokkal);
2. Tegyél meg egy fülre kattintás eseményt, amikor a megnyitott lap aktívvá válik (az aktív osztály hozzá van adva), és megjelenik a lap tartalma.
Ez minden feladat.