Tab 1

Lumilitaw ang nilalamang ito sa tab 1.

Tab 2

Lumilitaw ang nilalamang ito sa tab 2.

Tab 3

Lumilitaw ang nilalamang ito sa tab 3.

Ang code na ito ay iba sa HTML code para sa mga tab na nakita mo kanina. Karamihan ay tumutukoy sa mga tab bilang isang listahan ng mga ul tag na sinusundan ng isang seksyon ng nilalaman. Bagama't maaari kang gumamit ng markup na tulad nito, mas mahirap i-highlight ang mga tab dahil hindi mo mai-istilo ang tab gamit ang:target selector. Ang pinakamahusay na solusyon Ang nakita namin ay magdagdag ng tag ng seksyon na naaayon sa kulay at inilagay sa ibaba ng teksto ng tab, na ginawang nakalilito at hindi halata ang code.

CSS

Una naming i-istilo ang lalagyan ng artikulo. Binibigyan namin ito ng laki at kamag-anak na posisyon upang maiayos namin ang mga partisyon:

Article.tabs ( posisyon : kamag - anak ; display : block ; lapad : 40em ; taas : 15em ; margin : 2em auto ; )

Pagkatapos ay sundin ang mga seksyon. Ang mga ito ay ganap na nakaposisyon 1.8em mula sa itaas upang mag-iwan ng puwang para sa mga tab. Ang mga anino ng box-shadow property ay medyo transparent, dahil ang bawat seksyon ay nakasalansan sa ibabaw ng bawat isa.

Seksyon ng Article.tabs ( posisyon : absolute ; display : block ; tuktok : 1 .8em; kaliwa: 0; taas: 12em; padding: 10px 20px; background-color : #ddd ; border-radius: 5px ; box-shadow: 0 3px 3px rgba(0 ,0 ,0 ,0 . 1 ); z-index: 0; )

kasi huling tab ay ipapakita sa itaas, papalitan namin ito ng unang tab sa pamamagitan ng pagbibigay dito ng mataas na z-index:

Article.tabs section:first-child ( z-index : 1 ; )

Ngayon ay maaari na nating i-istilo ang mga tab. Ang mga ito ay pininturahan kapag sarado at matatagpuan sa itaas ng mga seksyon. Ang mga kaliwang margin ng pangalawa at pangatlong tab ay binago upang matiyak na ang mga tab ay hindi magkakapatong sa isa't isa.

Article.tabs section h2 ( position : absolute ; font-size : 1em ; font-weight : normal ; lapad : 120px ; taas : 1 .8em; itaas: -1 .8em; kaliwa: 10px; padding: 0; margin: 0; kulay: # 999 ; background-color : #ddd ; border-radius: 5px 5px 0 0 ; ) article.tabs section:nth-child (2) h2 ( left : 132px ; ) article.tabs section:nth-child (3 ) h2 ( left : 254px ; ) article.tabs section h2 a ( display : block ; lapad : 100 % ; taas ng linya: 1 .8em; text-align: center; text-dekorasyon: wala; kulay : magmana ; balangkas: 0 wala; )

Ang lahat ng mga tab at seksyon ay tinukoy na ngayon, at ang unang tab ay ipinapakita bilang default, kahit na walang seksyon na tinukoy sa address ng pahina. Ngayon ay maaari na nating baguhin ang kulay, kulay ng background at lalim ng napiling seksyon gamit ang :target selector:

Article.tabs section:target , article.tabs section:target h2 ( color : # 333 ; kulay ng background : #fff ; z-index: 2; )

Bilang karagdagan, magdagdag tayo ng transition effect kapag nagbago ang napiling tab.

Article.tabs section, article.tabs section h2 ( -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: lahat ng 500ms ease; transition: lahat 500ms kadalian)

Hindi tulad ng maraming solusyon sa gamit ang Javascript sinusuportahan ng aming solusyon sa CSS3 buong kwento mga transition sa pagitan ng mga tab upang gumana nang tama ang mga forward at back button sa browser. Posible ring direktang mag-link sa isang tab mula saanman sa page, gaya ng ipinapakita ng link na "NEXT".

Ang solusyon na ito ay hindi perpekto; sa unang pagdating mo sa pahina, ang unang tab ay aktibo ngunit ipinapakita sa isang naka-disable na estado. At ang problemang ito ay mahirap lutasin. Ang pinaka simpleng solusyon babawasan ang pagkakaiba sa pagitan ng on at off na mga estado.

Pagsasalin – Duty room

Ngayon ay magpapakita kami ng ilan kawili-wiling mga halimbawa mga tab na may nilalaman nang hindi gumagamit ng JavaScript o iba pang mga tool mga tool ng third party. Gamitin mo!

Sino ang nangangailangan ng mga tab ng CSS?

Kadalasan ang tanong " paano gumawa ng tabs css” ay tinatanong ng mga baguhan na hindi/hindi marunong gumamit ng mga script, o ng mga developer na nagsusumikap sa pag-optimize at pagganap. Siyempre, mas madaling magdagdag ng ilang linya ng code sa style.css file kaysa sa pagkonekta ng mga espesyal na plugin at pag-load ng site nang higit pa. Sa ibaba ay magbibigay kami ng ilang halimbawa kung gaano kadaling ipatupad ang mga tab ng nilalaman gamit ang purong CSS3.

1. Magagandang mga tab na may mabilis na pagtugon sa mga switch. Walang mga hindi kinakailangang animation o iba pang kalokohan dito. Mahusay at sa punto. Ang resulta ay nakamit sa pamamagitan ng:

2. Ang pangalawang opsyon ay naglalaman ng maliit na animation kapag lumilipat ng mga tab, at maganda rin ang hitsura nito. Ang paraan ng pagpapatupad ay pareho: elemento mga form ng pag-input na may katangian ng radyo. Maaari kang mag-click sa frame sa ibaba:

3. Well, ang huling opsyon ay kawili-wili dahil mukhang lumilipat sa pagitan ng mga yugto ng pakikipag-ugnayan ng user. Ang algorithm ay magkatulad, tseke lamang ang ginagamit sa halip na ang katangian ng radyo. Ang resulta ay nasa ibaba:

Paano gamitin ang mga tab na CSS na ito?

Upang makuha ang buong halimbawa, buksan ang frame sa isang bagong tab at tumawag menu ng konteksto. Sa loob nito piliin ang " Source code frame" at i-save ito sa iyong computer. Susunod, kopyahin ang HTML at CSS code sa iyong proyekto. Good luck!

Pagkatapos manood gawaing kurso mga kasamahan sa workshop kung saan ginamit ang mga tab sa mga input, gusto kong sabihin sa iyo ang tungkol sa apat na paraan para sa paglikha ng mga tab (pagkatapos dito ay mga tab) gamit ang malinis at vanilla CSS. Ngunit may nangyaring mali, at ang buong artikulo ay naging isang pag-aaral ng isang paraan para sa pag-aayos ng mga tab gamit target.

Pseudo-class target

Sa CSS target ay isang pseudo-class na idinisenyo upang magbigkis ng isang URL ( address bar browser) at isang elemento na may tinukoy na identifier sa pahina. Ang isang hashtag ay ginagamit sa dulo ng URL upang isaad ang elemento. Ang elementong itinuturo ng isang hashtag ay tinatawag target na elemento.

Kung may lalabas na hashtag sa URL na tumutugma sa halaga ng identifier ng anumang elemento sa page, mag-i-scroll dito.

Gamit ang pseudo-class na ito, hindi ka lamang makakapag-navigate sa iba't ibang bahagi ng mga artikulo, ngunit maaari ding baguhin ang kanilang mga istilo.

Halimbawa, sabihin nating mayroon tayong sumusunod na markup:

...

Panimula

May nagtext dito

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

Sa puntong ito, nilo-load ng browser ang pahina at agad na tumalon sa simula ng target na elemento. Sumang-ayon na ito ay medyo maginhawa.

Gayunpaman, ang karamihan kawili-wiling paggamit Ang pseudo-class na ito ay ang kakayahang maglapat ng mga istilo sa target na elemento. Halimbawa, maaari mong baguhin ang kulay ng teksto ng heading, na siyang target na elemento:

Heading:target ( kulay: #ffff99; )

Gayundin, gamit ang mga tagapili sa CSS maaari mong kontrolin ang katabi, bata at mga kaugnay na elemento:

Heading:target + p ( font-size: 2.4rem; )

Siyempre, ang klase ay ibinibigay dito lamang bilang isang halimbawa - walang sinuman ang nagbabawal sa direktang pag-access sa tagapili sa pamamagitan ng tag:

H1:target (kulay: #ffff99; )

Higit pa detalyadong impormasyon tungkol sa pseudo class target maaaring makuha mula sa mga materyales na ito:

• Pseudo-class:target - mga istilo para sa elemento ng anchor sa HTML na dokumento

Paunang inspeksyon

Sa tingin ko hindi lihim kung paano gumagana ang mga tab. Ngunit hayaan mo akong ipaalala sa iyo ang kakanyahan: ang gumagamit ay nag-click sa pamagat ng tab at ang mga nilalaman nito ay mahimalang ipinapakita.

Dati, at kahit ngayon, ito ay tapos na sa gamit ang JavaScript. Sa kasamaang palad, sa dulo ng artikulo ay mauunawaan mo kung bakit ang mga solusyon sa JavaScript ay mas kawili-wili mula sa punto ng kakayahang magamit kaysa sa mga solusyon sa CSS. Walang pagtakas dito, ngunit kailangan mong malaman.

Ang isang tipikal na widget ng tab ay ganito ang hitsura:

Ang lahat ay malinaw at teknikal na napakasimple. Ngunit bago natin simulan ang pagpapatupad, nais kong sabihin sa iyo kung bakit isinulat ang artikulong ito.

Ang problema ay hindi ako kuntento umiiral na mga solusyon. Parang pamilyar? Oo, ngunit narito ang lahat ay medyo mas kumplikado, dahil walang mga solusyon sa CSS na maaaring kopyahin at i-paste mula sa proyekto hanggang sa proyekto.

Kaya ito ang kailangan ko mula sa mga tab:

• Pinakamataas na kakayahang umangkop para sa mga proyekto. Nangangahulugan ito na sa pamamagitan ng pagkopya-paste ng jade at mas kaunting mga file ay magiging masaya ako.
• Pinakamataas na pagkakalas HTML markup mula sa CSS. Iyon ay, upang magdagdag ng mga bagong tab, hindi ko kailangang pumunta sa CSS at, batay sa markup, magdagdag ng isang bagay doon.
• Tukuyin ang default na tab sa pamamagitan ng isang klase.
• Normal na istraktura ng markup.
• Kulang sa kumpleto ganap na pagpoposisyon sa mga tab at switch.
• Bisikleta - ano ang mas mahusay kaysa sa iyong sariling bisikleta?
• Walang JavaScript.

Gayunpaman, bago magpatuloy sa solusyon, kailangan mong ilista ang lahat ng mga pamamaraan para sa pag-aayos ng mga tab sa CSS:

• Pseudo-class sinuri sa elemento ng pag-input;
• Pseudo-class target;
• Pseudo-class focus;
• Pseudo-class hover;

Mga opsyon na may hover At focus hindi ko gusto. Hindi ko na sila babanggitin sa artikulo.

Pagpapatupad

Magsimula tayo sa pamamagitan ng paglutas ng problema na ibinibigay sa atin ng paggamit ng isang pseudo-class target- mag-scroll sa target na elemento.

Sa una, ang artikulo ay naglalaman ng isang kuwento tungkol sa kung paano ako nakarating sa desisyon, ngunit sa huli ay wala ito dito. Hindi isang kawili-wiling aktibidad ang magsabi ng isang bagay na sa huli ay nagiging lohikal at medyo simple.

Upang maalis ang pag-scroll, kailangan mong italaga ang display property sa target na elemento at italaga ito walang halaga. Sa teorya, mayroon tayong elemento, sa esensya, ay nasa DOM at ang pag-scroll dito ay dapat gumana, ngunit dahil mayroon tayong display property, imposibleng kalkulahin ang mga coordinate ng elemento. Hindi ko alam kung totoo ba ito, ngunit gumagana ito.

Samakatuwid, hindi kami magre-refer sa tab mismo, ngunit sa isang karagdagang walang laman na bloke, na matatagpuan mismo sa kanyang harapan. Nakakalito? Ganun din ang naisip ko noong dalawang oras ko ng buhay na naghahanap ng solusyon.

Listahan ng HTML

Dalawang tab lang sa tatlo ang ibinigay ko. Sa tingin ko ang istraktura ay napakalinaw at hindi nangangailangan ng paliwanag.

Ang -default na klase ay tumutukoy sa default na tab na ipapakita. Ang block na nauuna sa block na may class item ay ang control block nito.

Listahan ng CSS

Sa kasamaang palad, ang CSS ay hindi kasing ganda ng gusto namin, ngunit pag-uusapan pa namin iyon sa ibang pagkakataon. Ang lahat ng mga komento sa code ay ibinigay sa mga komento :)

Tabs-widget > .content ( position: relative; ) // Itago ang walang laman na block na nilayon para sa pagkansela ng scroll tabs-widget > .content > .scroller ( display: none; ) // Ipakita ang tab sa tabi ng target na elemento sa. itaas ng unang tab na tabs-widget > .content > .scroller:target + .item ( display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2 ; ) // Dapat palaging may relative positioning.tabs-widget ang unang tab > .content > .scroller:target + .item.-default ( position: relative; ) // Mga istilo ng tab // Bigyang-pansin ang pagkakaroon ng tinukoy na maximum taas ng tab, kung hindi, ang mga malalaking tab ay lalampas sa mga default na laki ng tab, // kung ito ay mas maliit sa kanila tabs-widget > .content > .item ( background-color: #ffffff; color: #333333; padding: 20px; display: none; max-height: 384px ; )

Mahusay, tila gumagana ang lahat:

Tandaan na partikular kong itinalaga ang pangalawang tab na ipapakita bilang default. Paano mauunawaan ng gumagamit na ito ay aktibo na ngayon? Higit pa tungkol dito mamaya.

meron iba't ibang mga pagpipilian pagpapatupad ng pamamaraang ito. Ngunit sasabihin ko kaagad na marami sa kanila ang may mahigpit na koneksyon sa pagitan ng markup at CSS.

Iba pang mga pagpapatupad

• Mga tab (mga pahina) sa isang pahina sa html/css gamit ang:target

Animasyon

Bago i-publish ang artikulo, nagpasya akong matulog at sa umaga suriin ang lahat ng naisulat na. Gayunpaman, isang bitag ang naghihintay sa akin, na itinakda ng publiko Mga Webtackle - pagbuo at disenyo ng web. Ang mga taong ito ay nag-publish ng mga tab ng JavaScript. Naiintindihan mo ba? Sa mismong araw bago ako nagpasya na i-post ang artikulong ito. Kabalbalan!

Isang tala ng animation ng tab ang tumakbo sa mga komento. At pagkatapos ay nagpasya ako na kailangan kong magdagdag ng animation sa aking mga tab.

Ang problema ay hindi ka makakapag-attach ng animation sa unang tab, dahil palagi itong nandoon. Ipinahihiwatig nito ang pangangailangang gumana lamang sa mga tab na iyon na pinili ng user at kasabay nito ay subukang padilimin ang unang tab.

Marahil ay tamad akong mag-isip, ngunit wala akong maisip na mas mahusay kaysa dito:

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

Ang katapusan ng kagalakan

Sa puntong ito, ang masayang pag-iyak ay maaaring malunod, dahil ang mga problema sa pamamaraang ito ay:

• Ang lahat ng mga transition ng tab ay makikita sa kasaysayan.
• Ang unang tab ay palaging ipinapakita.
• Medyo may problemang pumili ng animation dahil sa ang katunayan na ang unang tab ay palaging ipinapakita.
• Kakila-kilabot na pagpapatupad ng pag-highlight ng mga aktibong tab.

Ngunit ang paraan ng pag-aayos ng mga tab gamit ang mga elemento ng input at ang pseudo-class:checked ay walang ganoong problema. Siyempre, maliban huling punto. Halimbawa, ang pag-aayos ng lohika para sa paglipat ng mga tab doon ay ginagawa tulad nito:

// Itago ang input .tabs-widget > .content > input ( display: none; ) // Itago ang lahat ng tab maliban sa isa na active.tabs-widget > .content > input:not(:checked) + .item ( display : wala;

Malubha ang problema sa pag-highlight sa aktibong tab. Ngunit mayroong apat na solusyon:

• Ang pagdaragdag ng isa pang target na elemento, ngunit bago ang bawat link, ay walang kapararakan.
• Hindi ko gusto ang isang patag na istraktura ng widget at buong CSS na nagbubuklod sa istraktura.
• Halos patag na istraktura na may CSS na nakatali sa istraktura - hindi ko ito gusto.
• Ganap na pagpoposisyon ng mga tab - hindi, ito ay kakila-kilabot.

Sa kasong ito, makakatanggap kami ng isang bastos na code na iyong pinapangarap araw-araw at magpapaalala sa iyo ng iyong kawalang-halaga.

Suporta sa browser

Pumunta kami sa Can I Use at makakita ng magandang larawan tungkol sa mga pseudo-classes target At panganay na anak.

Sinusubukan namin ang paggamit ng BrowserStack para sa pagganap sa IE9 at masaya na ang lahat ay ipinapakita nang tama.

Kailan gagamitin ang mga tab na CSS?

Medyo isang kawili-wiling tanong, kung isasaalang-alang na nabasa mo na ang halos buong artikulo noon tungkol sa kung paano gumawa ng mga tab sa CSS. Susubukan kong sagutin ito.

Ang mga CSS tab ay dapat gamitin kapag hindi mo kailangan ng suporta para sa IE sa ibaba ng bersyon 9 at mayroon kang pagnanais para dito. Sa lahat ng iba pang mga kaso, ang solusyon ay ang paggamit ng JavaScript.

Ang pinakaseryosong bahagi ng artikulo

Marahil, sa pagbubuod, gusto kong tanungin ang aking sarili ng isang tanong at subukang sagutin ito nang tapat hangga't maaari: "Sulit ba ang laro?"

At ang sagot ko diyan ay hindi.

Nakikita mo, anuman ang maaaring sabihin ng isa, ang mga tab sa target ay magbubunga sa mga tab sa input. Ang problema nila ay:

• Kailangan mong ipakita sa anumang paraan ang nilalaman ng unang tab - isang saklay.
• Ang mga problema sa animation dahil sa unang punto ay isang saklay.
• Ang solusyon sa problema sa pag-scroll sa target na elemento ay isang saklay.

Mahirap magsabi ng isang bagay na mauunawaan. hindi ko alam. Nakakita ako ng maraming iba't ibang mga pagpapatupad ng tab ng CSS, at wala sa mga ito ang ganap na nakakatugon sa aking mga pangangailangan. Handa akong tanggapin ang katotohanan na ang aking mga aktibong tab ay hindi mai-highlight, ang animation ay hindi maipapatupad nang hindi maganda, ngunit hanggang sa ang aming kaibigang taga-disenyo ay nagpasya na gawin ito.

Kung nagpasya ang iyong kaibigang taga-disenyo na i-highlight ang mga ito, mayroon kang dalawang opsyon:

• Nagnakaw ka ng 4 na Mga Paraan ng CSS3 Tabbed Content na mga tab mula dito (alinman ang gusto mo) at nababahala tungkol sa mahigpit na koneksyon sa pagitan ng istraktura ng layout at CSS.
• Gumagamit ka ng JS.

Hayaan akong linawin na sa artikulong "4 na Paraan ng CSS3 Tabbed Content" mayroong isang link sa pagitan ng lohika para sa paglipat ng mga tab at ang kanilang markup, na hindi nakakatugon sa aking mga kinakailangan. Ang lohika ng pagdaragdag ng mga bagong tab sa pamamagitan ng CSS ay mabuti kung saan ang mga tab ay maaaring hindi magbago nang mahabang panahon at/o hindi awtomatikong nilikha.

Sa tingin ko ang JavaScript ang pinakamaikli at pinakamabisang solusyon sa kasong ito. At oo, sa linyang ito inaamin ko na ang mga tab na CSS ay isang uri ng saklay. Ngunit hindi sila saklay hangga't hindi mo mai-highlight ang aktibong tab at walang kumplikadong mga animation ng paglipat.

Sa anumang kaso, kung gumagamit na ang iyong site ng JavaScript para sa ilang mga interface (menu, accordion, atbp.), hinihikayat kitang gumamit ng mga tab ng JavaScript, dahil sila ay:

• Mas madaling mapanatili.
• Mas nababaluktot kaysa sa anumang mga tab na CSS.
• Hindi sila gumagawa ng hindi kinakailangang markup.
• Gumamit ng mas tamang semantically markup.
• Libre mula sa mga disadvantages ng mga tab na CSS.

At, sa wakas, magtatanong ako ng dalawang katanungan na mag-aalala sa nag-aalalang mambabasa pagkatapos basahin ang artikulong ito:

• Anong mga tab ang ginagamit mo?
• Ano ang palagay mo tungkol sa mga tab ng CSS?

Salamat sa pagbabasa hanggang dulo.