Share
I den här handledningen lär vi oss att bygga en responsiv flikkomponent med CSS och lite JavaScript. Det är absolut möjligt att skapa rena CSS-flikkomponenter, men för det här exemplet får vi sätta in våra JavaScript-färdigheter.
Här är vad vi ska bygga, i några stora steg:
Notera: Denna handledning kommer inte att fokusera på hur man gör flikkomponenten tillgänglig, så att utforska tillgänglighet skulle säkert vara ett giltigt nästa steg.
Till att börja med, låt oss undersöka den obligatoriska markeringen. Vi har en behållare som innehåller flikarna själva (listobjekt), liksom innehållet för varje flik (flikpaneler). För att associera en flik med motsvarande panel använder vi data index anpassat attribut som innehåller ett unikt värde för varje flikpanel. Som sagt, på grund av nollbaserad numrering, en panel med data-index = 0 är associerad med den första fliken, en panel med data-index = 1 är associerad med den andra och så vidare.
Här är HTML-markupen:
Låt oss i nästa steg ange några CSS-regler för vår komponent. Inget alltför fint, bara några grundläggande stilar. En sak att notera är att vi inte använder några övergångar (t ex blekna, glida) för att växla mellan flikpanelerna; i stället visas dessa och försvinna med en enkel på / av-brytare.
Här är de ursprungliga stilarna:
.flikbehållare maxbredd: 1000px; marginal: 50px auto; vaddering: 25px; .tabs display: flex; .tabs li: not (: last-child) margin-right: 7px; .tabs li a display: block; position: relativ; topp: 4px; vaddering: 10px 25px; gränslinje: 2px 2px 0 0; bakgrund: vit; opacitet: 0,7; övergång: alla 0.1 s lätt in-ut; .tabs li.active a, .tabs li a: svävar opacitet: 1; topp: 0; .tabs-innehåll position: relativ; z-index: 2; vaddering: 25px; gränsstråle: 0 4px 4px 4px; bakgrund: vit; .tabs-panel display: none; .tabs-panel.active display: block;
Med HTML och CSS på plats är det dags att titta på den obligatoriska JavaScript-koden.
Varje gång vi klickar på en flik gör vi följande saker:
Accentsconagua
aktiva klass från motsvarande flik (som standard den första) och den tillhörande flikpanelen (som standard den första).li förälder till den här fliken, lägg till aktiva klass till det och hämta sitt index.data index attribut) matchar ovannämnda indexvärde och tilldela aktiva klass till det.Här är den resulterande JavaScript-koden:
const tabLinks = document.querySelectorAll (". flikar a"); const tabPanels = document.querySelectorAll (". flikarpanelen"); för (låt el av tabLinks) el.addEventListener ("klicka", e => e.preventDefault (); document.querySelector ('.flikar li.active'). classList.remove ("aktiv"); querySelector ('. tabs-panel.active') classList.remove ("aktiv"); const parentListItem = el.parentElement; parentList.classList.add ("aktivt"); const index = [... parentListItem.parentElement.children] .indexOf (parentListItem); const panel = [... tabPanels] .filter (el => el.getAttribute ("dataindex") == index); panel [0] .classList.add ("active");) ; Vår komponent är nästan klar! Det sista vi behöver göra är att göra komponenten lyhörd. Så, till exempel när visningsporten har en maximal bredd på 600px, ska den kollapsa och se så ut:
Eftersom vi använder en första stationär tillvägagångssätt, är dessa CSS-reglerna som vi måste skriva över:
@media skärm och (maxbredd: 600px) .tabs flex-direction: column; .tabs li bredd: 100%; .tabs li: not (: last-child) margin-right: 0; .tabs li a border-radius: 0; opacitet: 1; topp: 0; .tabs li.active a :: före content: '•'; padding-right: 5px; .tabs-innehåll gränslinje: 0;
Vår demo fungerar bra i alla nya webbläsare och enheter. Som vanligt med mina tutorials använder vi Babel för att kompilera ES6-koden ner till ES5.
I den här korta handledningen lyckades vi skapa en användbar responsflikkomponent med HTML, CSS och JavaScript. Återigen är denna komponent inte korrekt tillgänglig, men om du vill förbättra sin funktionalitet, skulle det vara ett bra nästa steg. Lycklig kodning!
