Vahekaart 1

See sisu kuvatakse vahekaardil 1.

2. vahekaart

See sisu kuvatakse vahekaardil 2.

Vahekaart 3

See sisu kuvatakse vahekaardil 3.

See kood erineb varem nähtud vahekaartide HTML-koodist. Enamik määratleb vahekaardid ul-i siltide loendina, millele järgneb sisujaotis. Kuigi saate sellist märgistust kasutada, on vahekaartide esiletõstmine keerulisem, kuna te ei saa vahekaarti stiili valida :target valijaga. Parim otsus Leidsime, et lisasime jaotise märgendi, mis on vastavalt värvitud ja paigutatud vahekaardi teksti alla, mis muutis koodi segaseks ja mitte ilmseks.

CSS

Kõigepealt kujundame artikli konteineri stiili. Anname sellele suuruse ja suhtelise asukoha, et saaksime vaheseinu korraldada:

Artikkel.tabs ( asend : suhteline ; ekraan : plokk ; laius : 40em ; kõrgus : 15em ; veeris : 2em auto ; )

Seejärel järgige jaotisi. Need on paigutatud ülaosast absoluutselt 1,8 mm kaugusele, et jätta vahelehtedele ruumi. Kasti-varju omaduse varjud on üsna läbipaistvad, kuna iga sektsioon on üksteise peale virnastatud.

Artiklite vahelehtede jaotis ( asend : absoluutne ; kuva : plokk ; ülemine : 1 .8em; vasakule: 0; kõrgus: 12em; polsterdus: 10px 20px; taustavärv : #ddd ; piiri raadius: 5 pikslit ; box-shadow: 0 3px 3px rgba(0 ,0 ,0 ,0 . 1 ) ; z-indeks: 0; )

Sest viimane vahekaart kuvatakse ülaosas, vahetame selle esimese vahekaardiga, andes sellele kõrge z-indeksi:

Artiklite vahelehtede jaotis: esimene laps ( z-indeks : 1 ; )

Nüüd saame vahekaarte stiilida. Need on värvitud, kui need on suletud ja asuvad sektsioonide kohal. Teise ja kolmanda vahelehe vasakpoolset veerist on muudetud tagamaks, et sakid ei kattuks.

Artiklite vahelehtede jaotis h2 ( asukoht : absoluutne ; fondi suurus : 1 em ; fondi kaal : tavaline ; laius : 120 pikslit ; kõrgus : 1 .8em; ülemine: -1 .8em; vasakul: 10px; polsterdus: 0; marginaal: 0; värv: # 999 ; taustavärv : #ddd ; piiri raadius: 5px 5px 0 0 ; ) article.tabs section:nth-child (2) h2 (vasakul : 132px ; ) article.tabs section:nth-child (3 ) h2 (vasakul : 254px ; ) article.tabs section h2 a (kuva : plokk ; laius : 100 % ; joone kõrgus: 1 .8em; teksti joondamine: keskel; tekst-kaunistus: puudub; värvus: pärand; ülevaade: 0 puudub; )

Kõik vahelehed ja jaotised on nüüd määratletud ning vaikimisi kuvatakse esimene vahekaart, isegi kui lehe aadressis pole jaotist määratud. Nüüd saame muuta valitud jaotise värvi, taustavärvi ja sügavust, kasutades :target valijat:

Artiklite vahelehtede jaotis:sihtmärk , artiklite vahelehtede jaotis:sihtmärk h2 ( värv : # 333 ; taustavärv : #fff ; z-indeks: 2; )

Lisame lisandina üleminekuefekti, kui valitud vahekaart muutub.

Artiklite vahekaartide jaotis, artiklite vahelehtede jaotis h2 ( -webkit-transition: kõik 500 ms lihtsus; -moz-üleminek: kõik 500 ms lihtsus; -ms-üleminek: kõik 500 ms lihtsus; -o-üleminek: kõik 500 ms lihtsus; üleminek: kõik 500 ms lihtsus)

Erinevalt paljudest lahendustest kasutades Javascripti meie CSS3 lahendus toetab täis lugu vahekaartide vahel, et brauseri edasi- ja tagasinupud töötaksid õigesti. Samuti on võimalik linkida otse vahekaardile kõikjalt lehel, nagu näitab link "JÄRGMINE".

See lahendus pole ideaalne, kui esimest korda lehele jõuate, on esimene vahekaart aktiivne, kuid kuvatakse keelatud olekus. Ja seda probleemi on raske lahendada. Kõige lihtne lahendus vähendab sisse- ja väljalülitatud olekute erinevust.

Tõlge – tööruum

Täna tutvustame mõnda neist huvitavaid näiteid sisuga vahelehed ilma JavaScripti või muid tööriistu kasutamata kolmanda osapoole tööriistad. Kasuta seda!

Kes vajab CSS-i vahekaarte?

Kõige sagedamini tekib küsimus " kuidas teha vahekaarte css” küsivad kas algajad, kes ei oska/ei oska skripte kasutada, või optimeerimise ja jõudluse poole püüdlevad arendajad. Muidugi on lihtsam lisada faili style.css paar rida koodi, kui ühendada spetsiaalseid pistikprogramme ja laadida saiti veelgi rohkem. Allpool toome mõned näited selle kohta, kui lihtne on sisuvahekaarte rakendada puhta CSS3 abil.

1. Kenad vahelehed kiire reageerimisega lülititele. Siin pole tarbetuid animatsioone ega muud jama. Kompetentselt ja asjalikult. Tulemus saavutatakse läbi:

2. Teine valik sisaldab vahekaartide vahetamisel väikest animatsiooni ja see näeb ka hea välja. Rakendusvahendid on samad: element sisestusvormid raadio atribuudiga. Võite klõpsata alloleval raamil:

3. Viimane võimalus on huvitav, kuna see näeb välja nagu kasutaja suhtluse etappide vahel lülitumine. Algoritm on sarnane, raadio atribuudi asemel kasutatakse ainult check. Tulemus on allpool:

Kuidas neid CSS-i vahekaarte kasutada?

Täieliku näite saamiseks avage raam uuel vahelehel ja helistage kontekstimenüü. Valige selles " Allikas raam" ja salvestage see oma arvutisse. Järgmisena kopeerige HTML- ja CSS-kood oma projekti. Edu!

Pärast vaatamist kursusetöö kolleegid töökojas, kus sisenditel kasutati sakke, tahtsin teile rääkida neljast meetodist vahekaartide (edaspidi sakid) loomiseks puhta ja vanilje CSS-i abil. Kuid midagi läks valesti ja kogu artikkel muutus vahekaartide korraldamise meetodi uurimiseks sihtmärk.

Pseudoklass sihtmärk

CSS-is sihtmärk on pseudoklass, mis on loodud siduma URL-i ( aadressiriba brauser) ja lehel määratud identifikaatoriga element. URL-i lõpus kasutatakse elemendi tähistamiseks hashtag'i. Kutsutakse elementi, millele hashtag osutab sihtelement.

Kui URL-is kuvatakse hashtag, mis ühtib lehe mis tahes elemendi identifikaatori väärtusega, keritakse seda.

Seda pseudoklassi kasutades saate mitte ainult liikuda artiklite erinevatesse osadesse, vaid ka muuta nende stiile.

Oletame näiteks, et meil on järgmine märgistus:

...

Sissejuhatus

Siin on natuke teksti

https://website.com/articles/target-for-you#introduction

Sel hetkel laadib brauser lehe ja hüppab kohe sihtelemendi algusesse. Nõus, et see on üsna mugav.

Siiski, kõige rohkem huvitav kasutamine See pseudoklass on võime rakendada sihtelemendile stiile. Näiteks saate muuta sihtelemendiks oleva pealkirja tekstivärvi:

Pealkiri: sihtmärk ( värv: #ffff99; )

Samuti saate CSS-i valijate abil juhtida külgnevaid, alam- ja seotud elemente:

Pealkiri: sihtmärk + p ( fondi suurus: 2,4 rem; )

Muidugi on klass siin toodud vaid näitena – keegi ei keela sildi abil otse valijale ligi pääseda:

H1: sihtmärk (värv: #ffff99; )

Rohkem detailne info pseudoklassi kohta sihtmärk saab järgmistest materjalidest:

• Pseudoklass:target – HTML-dokumendi ankurelemendi stiilid

Esmane ülevaatus

Ma arvan, et pole saladus, kuidas vahekaardid töötavad. Kuid tuletan meelde põhiolemust: kasutaja klõpsab vahekaardi pealkirjal ja selle sisu kuvatakse imekombel.

Varem ja ka praegu tehti seda koos JavaScripti kasutades. Kahjuks saad artikli lõpus aru, miks JavaScripti lahendused on kasutusmugavuse seisukohalt palju huvitavamad kui CSS-lahendused. Sellest pole pääsu, aga sa pead teadma.

Tüüpiline vahekaardi vidin näeb välja umbes selline:

Kõik on selge ja tehniliselt väga lihtne. Kuid enne rakendamise alustamist tahan teile öelda, miks see artikkel kirjutati.

Probleem on selles, et ma pole rahul olemasolevaid lahendusi. Tundub tuttav? Jah, kuid siin on kõik mõnevõrra keerulisem, kuna CSS-is pole lahendusi, mida saaks projektist projekti kopeerida ja kleepida.

Nii et see on see, mida ma vahekaartidelt vajan:

• Maksimaalne kohandatavus projektide jaoks. See tähendab, et jade ja vähemate failide kopeerimisega olen rahul.
• Maksimaalne lahtisidumine HTML märgistus CSS-ist. See tähendab, et uute vahekaartide lisamiseks ei pea ma CSS-i minema ja märgistuse põhjal sinna midagi lisama.
• Määrake klassi kaudu vaikekaart.
• Tavaline märgistuse struktuur.
• Täielikkuse puudumine absoluutne positsioneerimine vahelehtedel ja lülititel.
• Jalgratas – mis võiks olla parem kui teie enda jalgratas?
• JavaScript puudub.

Enne lahendusega jätkamist peate siiski loetlema kõik CSS-i vahekaartide korraldamise meetodid:

• Pseudoklass kontrollitud sisendelemendi juures;
• Pseudoklass sihtmärk;
• Pseudoklass keskenduda;
• Pseudoklass hõljuma;

Valikud koos hõljuma Ja keskenduda Mulle ei meeldi. Rohkem ma neid artiklis ei maini.

Rakendamine

Alustuseks lahendame probleemi, mille pseudoklassi kasutamine meile annab sihtmärk- kerige sihtelemendini.

Algselt sisaldas artikkel lugu sellest, kuidas ma selle otsuseni jõudsin, kuid lõpuks seda siia ei tule. Ei ole huvitav tegevus rääkida midagi, mis lõpuks osutub loogiliseks ja üsna lihtsaks.

Kerimisest vabanemiseks tuleb sihtelemendile määrata kuva omadus ja see määrata väärtus puudub. Teoreetiliselt on meil see, et element on sisuliselt DOM-is ja selleni kerimine peaks toimima, kuid kuna meil on kuvamise atribuut, on võimatu elemendi koordinaate arvutada. Ma ei tea, kas see on tõsi, aga see töötab.

Seetõttu viitame mitte vahekaardile endale, vaid täiendavale tühi plokk, mis asub otse tema ees. Keeruline? Ka mina mõtlesin nii, kui veetsin kaks tundi oma elust lahendust otsides.

HTML-loend

Olen esitanud ainult kaks vahekaarti kolmest. Arvan, et ülesehitus on äärmiselt selge ega vaja selgitusi.

Klass -default määrab kuvatava vaikekaardi. Klassiüksusega plokile eelnev plokk on selle juhtplokk.

CSS-i loend

Kahjuks pole CSS nii ilus, kui tahaksime, kuid sellest räägime hiljem lähemalt. Kõik kommentaarid koodi kohta on toodud kommentaarides :)

Tabs-widget > .content ( asukoht: suhteline; ) // Peida tühi plokk, mis on ette nähtud kerimise tühistamiseks tabs-widget > .content > .scroller ( kuva: puudub; ) // Kuvatakse vahekaart sihtelemendi kõrval. esimese vahelehe ülaosas tabs-widget > .content > .scroller:target + .item (kuva: blokk; asukoht: absoluutne; vasak: 0; parem: 0; ülemine: 0; alumine: 0; z-indeks: 2 ; ) // Esimesel vahelehel peab alati olema suhteline positsioneerimine.tabs-widget > .content > .scroller:target + .item.-default ( asukoht: suhteline; ) // Tabs styles // Pöörake tähelepanu määratud maksimumi olemasolule vahelehe kõrgus, muidu // ületavad suured vahelehed vaikevahekaardi suurusest, // kui see on neist väiksem, tabs-widget > .content > .item ( taustavärv: #ffffff; värv: #333333; polster: 20px; max-height: 384px: auto ) // Kuva alati esimene tab-widget > . )

Suurepärane, kõik näib toimivat:

Pange tähele, et määrasin teise vahekaardi vaikimisi kuvamiseks. Kuidas saab kasutaja aru, et see on nüüd aktiivne? Sellest lähemalt hiljem.

Olemas erinevaid valikuid selle tehnika rakendamine. Kuid ütlen kohe, et paljudel neist on märgistuse ja CSS-i vahel tihe seos.

Muud teostused

• Vahekaardid (lehed) ühel lehel html/css-is kasutades:target

Animatsioon

Enne artikli avaldamist otsustasin veidi magada ja hommikul hinnata kõike, mis on juba kirjutatud. Mind ootas aga avalikkuse seatud lõks Webtackles – veebiarendus ja -kujundus. Need poisid avaldasid JavaScripti vahekaardid. Kas sa saad aru? Päev enne seda, kui otsustasin selle artikli postitada. ennekuulmatu!

Märkus vahelehe animatsiooni kohta jooksis läbi kommentaaride. Ja siis otsustasin, et pean oma vahekaartidele animatsiooni lisama.

Probleem on selles, et te ei saa esimesele vahelehele animatsiooni lisada, kuna see on alati olemas. See tähendab, et tuleb töötada ainult nende vahekaartidega, mille kasutaja valis, ja samal ajal proovida esimest vahekaarti tumedamaks muuta.

Võib-olla olen ma liiga laisk, et mõelda, kuid ma ei suutnud midagi paremat välja mõelda kui see:

@keyframes tabs ( 0% ( värv: #ffffff; ) 100% ( color: #333333; ) .tabs-widget > .content > .scroller:target + .item ( animatsioon: tabs 1s; ... )

Rõõmu lõpp

Siinkohal võivad rõõmsad hüüded ära uputada, sest selle meetodi probleemid on järgmised:

• Kõik vahelehtede üleminekud kajastuvad ajaloos.
• Esimene vahekaart kuvatakse alati.
• Animatsiooni valimine on üsna problemaatiline, kuna alati kuvatakse esimene vahekaart.
• Aktiivsete vahekaartide esiletõstmise kohutav rakendamine.

Kuid sisendelementide ja pseudoklass:kontrollitud vahekaartide korraldamise meetodil selliseid probleeme pole. Muidugi, välja arvatud viimane punkt. Näiteks vahekaartide vahetamise loogika korraldamine toimub järgmiselt:

// Peida sisend .tabs-widget > .content > input ( kuva: puudub; ) // Peida kõik vahelehed, välja arvatud see, mis on aktiivne.tabs-widget > .content > input:not(:checked) + .item ( kuva : mitte ühtegi)

Probleem aktiivse vahekaardi esiletõstmisega on tõsine. Kuid lahendusi on neli:

• Teise sihtelemendi lisamine, kuid enne iga linki, on jama.
• Ma ei taha lamedat vidinastruktuuri ja täielikku CSS-i sidumist struktuuriga.
• Peaaegu tasane struktuur, mille CSS on struktuuriga seotud – ma ei taha seda.
• Vahelehtede absoluutne paigutus – ei, see saab olema kohutav.

Sel juhul saame jama koodi, millest iga päev unistad ja mis tuletab meelde sinu väärtusetust.

Brauseri tugi

Käime Can I Use ja näeme imelist pilti pseudotundidest sihtmärk Ja esimene laps.

Testime BrowserStacki abil jõudlust IE9-s ja oleme rõõmsad, et kõik kuvatakse õigesti.

Millal kasutada CSS-i vahekaarte?

Päris huvitav küsimus, arvestades, et olete lugenud peaaegu kogu artikli enne seda, kuidas CSS-is vahekaarte teha. Püüan sellele vastata.

CSS-i vahekaarte tuleks kasutada siis, kui te ei vaja IE-d alla versiooni 9 ja teil on selle järele soov. Kõigil muudel juhtudel on lahendus JavaScripti kasutamine.

Artikli kõige tõsisem osa

Tõenäoliselt tahaksin kokkuvõttes endalt küsida üheainsa küsimuse ja proovida sellele võimalikult ausalt vastata: "Kas mäng oli küünalt väärt?"

Ja minu vastus sellele on ei.

Näete, mida iganes võib öelda, sakid on peal sihtmärk allub vahelehtedele sisend. Nende probleem seisneb selles:

• Peate kuidagi näitama esimese vahelehe sisu - karku.
• Esimesest punktist tulenevad probleemid animatsiooniga on kargud.
• Sihtelemendini kerimise probleemi lahenduseks on kark.

Raske on midagi arusaadavat öelda. Ei tea. Olen leidnud palju erinevaid CSS-i vahekaartide rakendusi ja ükski neist ei vasta täielikult minu vajadustele. Olen valmis leppima tõsiasjaga, et minu aktiivseid vahelehti ei tõsteta esile, animatsioon on halvasti rakendatud, kuid ainult seni, kuni meie disainerist sõber seda teha otsustab.

Kui teie disainerist sõber otsustab need esile tõsta, on teil kaks võimalust.

• Varastate siit 4 Methods CSS3 vahekaartidega sisu vahekaarti (ükskõik kumb teile meeldib) ja ärritute paigutusstruktuuri ja CSS-i tiheda seose pärast.
• Kasutate JS-i.

Lubage mul selgitada, et artiklis "4 meetodit CSS3 vahekaartidega sisu" on vahekaartide vahetamise loogika ja nende märgistuse vahel seos, mis ei vasta minu nõuetele. CSS-i kaudu uute vahekaartide lisamise loogika on hea, kui vahekaardid ei pruugi pikka aega muutuda ja/või neid ei looda automaatselt.

Minu arvates on JavaScript sel juhul lühim ja tõhusaim lahendus. Ja jah, selle joonega tunnistan, et CSS-i vahelehed on omamoodi kark. Kuid need ei ole kargud seni, kuni te ei saa aktiivset vahekaarti esile tõsta ja pole keerulisi üleminekuanimatsioone.

Igal juhul, kui teie sait kasutab juba mõne liidese (menüüd, akordionid jne) jaoks JavaScripti, soovitan teil kasutada JavaScripti vahekaarte, kuna need:

• Lihtsam hooldada.
• Paindlikum kui ükski CSS-i vahekaart.
• Need ei tooda tarbetut juurdehindlust.
• Kasutage semantiliselt õigemat märgistust.
• Vaba CSS-i vahekaartide puudustest.

Ja lõpuks, ma esitan kaks küsimust, mis pärast selle artikli lugemist puudutavad asjaomast lugejat:

• Milliseid vahekaarte te kasutate?
• Mida arvate CSS-i vahekaartidest?

Täname, et lugesite lõpuni.