Lapok lehet a css, de
Az ál-cél
Ha az URL jelenik meg hashtag, amely egybeesik a azonosító értéke bármely elemének az oldalon, lapozzunk, hogy történik.
Ezzel a pszeudo-osztály nem csak hogy az átmenet a különböző részein a cikkeket, hanem megváltoztatni a stílust.
Tegyük fel például, mi a következő jelölést:
A felhasználó kap egy linket egy kolléga tartalmazó hashtag (azaz miután a hash #), és kattint rá:
Ezen a ponton, a böngésző betölti az oldalt, és azonnal ugrik a tetején a cél elemet. Egyetértek azzal, hogy ez elég kényelmes.
Azonban a legérdekesebb ezzel psedoklassa az a képesség, hogy alkalmazza a stílusokat a cél elemet. Például meg lehet változtatni a színét a szöveget a fejléc, ami a cél elem:
Továbbá, a szelektor a CSS akkor az ellenőrzés a szomszédok, a leányvállalatok és a kapcsolódó elemek:
Természetesen az osztály adják csak példaként - senki leáll azonnali hatállyal alkalmazni kell a választó a címkén:
További információ a cél ál-osztályok lehet beszerezni ezekből az anyagokból:
első ellenőrzés
Azt hiszem, ez nem titok, mint a fülek vannak elrendezve. De még mindig emlékszem a lényeg: a felhasználó rákattint a lap címe, és csodával határos módon mutatja a tartalmát.
Tipikus lapok widgetet néz ki:
A probléma az, hogy nem vagyok elégedett a meglévő megoldásokat. Ismerős? Igen, de minden egy kicsit bonyolultabb, mint a CSS nincsenek olyan megoldások copy-paste projektenként.
Tehát, amire szükségem van a fülek:
Azonban mielőtt döntést, meg kell felsorolni az összes szervezésére szolgáló módszerek füleket CSS:
Változatok hover és a fókusz nem szeretem. Cikkükben azt már nem említi.
végrehajtás
Kezdjük a megoldást a problémára, amit használni csúszik ál cél - lapozzunk a kívánt elemet.
Kezdetben a cikket egy történetet arról, hogy azért jöttem, hogy a döntést, de a végén mindegy, hogy nem lesz itt. Nem szórakoztató e szakma -, hogy elmondja, mi az eredmény logikus és egyszerű.
Ahhoz, hogy megszabaduljon a tekercset, akkor regisztrálnia kell a cél elemet display tulajdonság, és adja meg nincs. Elméletileg van ez az elem lényegét tekintve, az a DOM, és lépjünk ki kell működtetni, de mivel már a display tulajdonság. lehetetlen koordinátáinak kiszámításához az elem. Nem tudom, hogy ez-e a helyzet, de működik.
Ezért nem fogunk hivatkozni önmagában fülre, és további üres doboz található előtte. Sly? Ez az, amit gondoltam, amikor töltött két óra élete a megoldások keresését.
Hoztam csak két három fül. Úgy vélem, hogy a szerkezet nagyon világos, és nem igényel magyarázatot.
Class -default jelzi a lapot, amelyen megjelenik az alapértelmezett. Blokk megelőző mondatban a tárgy osztályban. van a vezérlő egység.
Figyelemre méltó, mint például hogyan is működik:
Nézd meg a példát CodePen.
Figyeljük meg, hogy én konkrétan azonosított második lap jelenik meg alapértelmezés szerint. Amint a felhasználó meg fogja érteni, hogy ez most már aktív? Bővebben később.
Vannak különböző kiviteli alakjai ezt a technikát. De azt kell mondanom, hogy sokan közülük a kemény kapcsolatot jelölő és CSS.
A probléma az, hogy az első lapon animációk nem kap a nyitjára, mint mindig. Ezért van szükség arra, hogy csak azok a lapok, amelyek a felhasználó által kiválasztott, és egyidejűleg próbálja sötétedni az első lapot.
Talán túl lusta gondolkodni, de semmi, mint ez, jövök fel, de nem tudott:
Vége az öröm
Ezen örömteli kiáltásait lehet állítani, mert a probléma ezzel a módszerrel az, hogy:
- Az átmeneteket a tabam a történelembe.
- Az első fül mindig megjelenik.
- Elég nehéz kiválasztani az animáció az a tény, hogy az első fül mindig megjelenik.
- Szörnyű végrehajtás háttérvilágítás aktív lapok.
De az ilyen problémák megfosztva a szervezet a fülek módszerrel egy input elem és ál-: ellenőrzik. Persze, kivéve az utolsó elem. Például, a szervezet váltás a lapok logika van ez:
A probléma a kibocsátás az aktív fül komoly karaktert. De van annyi, mint négy megoldás:
- Újabb cél elem, de minden egyes hivatkozás elé - képtelenség.
- A lakás felépítése a modult, és a teljes CSS kötelező a szerkezet - nem akar.
- Majdnem lapos szerkezet, utalva a CSS szerkezet - nem akar.
- Abszolút pozicionálás lapok - nincs, nem lesz terror.
Ebben az esetben megkapjuk govnokod is álom minden nap, és emlékeztetem nikchomnosti.
böngésző támogatása
Ide használhatok, és lát egy csodálatos képet illetően a pszeudo cél, és az első gyermek.
Tesztelésénél BrowserStack teljesítmény IE9 és örülünk annak, hogy mindent helyesen jelenik meg.
Mikor kell használni füleket a CSS?
Elég egy érdekes kérdés, tekintve, hogy elolvasta a legtöbb cikket, mielőtt azt, hogy hogyan lehet füleket CSS. Megpróbálok válaszolni.
A legsúlyosabb része annak a cikknek
Talán elérő, szeretnék feltenni magának egy kérdést, és megpróbál választ, mint őszintén: „A játék megéri a fáradságot?”.
És a válaszom - nem.
Tudod, akár tetszik, akár nem, a füleket a cél, így tabam a bemeneten. a probléma az, hogy:
- Valahogy azt mutatják, a tartalom, az első Taba - mankó.
- Gondok vannak az animáció az első elem - egy mankó.
- A probléma megoldása görgetés a kívánt termék - egy mankó.
Nehéz bármit is mondani érthető. Nem tudom. Találtam sok különféle megvalósítások füleket CSS, és egyikük sem találkozik a követelményeknek teljesen. Kész vagyok elfogadni azt a tényt, hogy én sem lesz kiemelve aktív lapok lesz szerencsétlen megvalósítása animáció, de hogy pontosan amíg barátunk a tervező nem dönt, hogy erre.
Ha a barátod, a tervező úgy döntött, hogy kiemelje őket, akkor két lehetősége van:
- Ellopakodik 4 Módszerek CSS3 füles tartalom lapok (amit élvezni), és felboríthatja a merev kapcsolat felépítése az elrendezés és a CSS.
- Használata JS.
Tisztázta, hogy a cikk „4 módszerek CSS3 füles tartalom» Csattant váltás a lapok a logika és a jelölést, amely nem felel meg a követelményeknek. A logika hozzátéve, az új fülek segítségével CSS jó, ha a fül nem lehet megváltoztatni egy hosszú idő, és / vagy nem jelennek meg automatikusan.
- Könnyebb fenntartani.
- Rugalmas lapok bármilyen CSS.
- Nem termel extra jelölést.
- Használjon több szemantikailag helyes jelölést.
- Hátrányok nélkül füleket CSS.
És végül, kérem két kérdést, amely gerjeszti az olvasó közömbös a cikk elolvasása után:
- És mi füleket használ?
- Mit gondol a füleket a CSS?
Köszönöm, hogy olvassa el a végére.
Share on fizetési ellenséges vagy kávé.
Minél gyakrabban isznak kávét, annál én írom a cikket.