Целта на псевдо
Ако адресът се появява маркер диез, което съвпада със стойността на идентификатора на всеки елемент на страницата, превъртете до него се случва.
С тази псевдо-клас не само може да направи прехода към различни части на статиите, но и да променят своите стилове.
Да предположим, че имаме следното маркиране:
Потребителят получава връзка от колега, съдържащи таг (тоест след хеш #) и кликне върху нея:
В този момент, браузърът зарежда страницата и веднага скача в началото на елемента цел. Съгласен съм, че това е доста удобно.
Въпреки това, най-интересното използването на този psedoklassa е способността да се прилагат стилове, за да елемента цел. Например, можете да промените цвета на текста в заглавната част, което е елемента цел:
Също така, с помощта на инструментите за избор на CSS можете да контролирате съседите, дъщерни дружества и свързани с тях елементи:
Разбира се, този клас е даден само като пример - никой не спира да се прилага веднага за селектора на маркера:
За повече информация относно целевите псевдо-класовете могат да бъдат получени от тези материали:
първоначална проверка
Мисля, че това е тайна, като разделите са подредени. Но все пак си припомним същността: потребителят кликне върху заглавието на раздела, а по чудо показва съдържанието му.
Типични раздели приспособление изглежда така:
Проблемът е, че аз не съм доволен от съществуващите решения. Познати? Да, но всичко е малко по-сложно, тъй като в CSS няма никакви решения, които могат да копират паста при всеки проект.
Така че, това, което аз от разделите трябва:
Въпреки това, преди да се пристъпи към решение, което трябва да се изброят всички методи за организиране раздели в CSS:
Варианти с висене и фокус, които не харесвам. Тяхната статия аз вече няма да споменавам.
изпълнение
Нека започнем с решаването на проблема, който ние използваме фишове мишена псевдо - превъртете до желаната опция.
Първоначално статията е история за това как стигнах до решението, но в крайна сметка все пак няма да е тук. Не е забавно тази професия - да каже какъв е резултатът е логичен и сравнително лесно.
За да се отървете от книгата, трябва да се регистрирате мишена елемент дисплей собственост и да я даде никой. На теория имаме този елемент в своята същност е в DOM и превъртете до него трябва да работи, но тъй като ние имаме имота дисплей. е невъзможно да се изчисли координатите на елемента. Аз не знам дали това е така, но тя работи.
Ето защо, ние няма да се отнасят към себе си в раздела, а допълнителна празна кутия намира пред нея. Хитър? Това е, което си мислех, когато бях прекарал две час от живота си в търсенето на решения.
Донесох само две от трите раздела. Мисля, че структурата е много ясно и не изисква обяснение.
Клас -default показва в раздела, който се показва по подразбиране. Блок предходната блока с класа на т. е неговото управление.
Забележително е, че като как тя работи дори и:
Вижте примера на CodePen.
Имайте предвид, че аз конкретно идентифицирани втори раздел се показва по подразбиране. Тъй като потребителят ще разбере, че тя вече е активна? Повече за това по-късно.
Има различни варианти на тази техника. Но трябва да кажа, че много от тях са с твърда връзка между маркиране и CSS.
Проблемът е, че в първия раздел анимации не се закача, тъй като тя винаги е така. Оттук и необходимостта да се използват само тези раздели, които са избрани от потребителя и едновременно с това се опита да помрачи първия раздел.
Може би имам прекалено мързеливи, за да мисля, но нищо такова, аз се качи и да не може:
Край на радост
На тази радостни викове може да бъде спряна, защото проблемът с този метод е, че:
- Всички преходи на tabam записани в историята.
- Първият раздел винаги се показва.
- Доста е трудно да се избере най-анимация от факта, че първия раздел винаги се показва.
- Ужасно фоново осветление изпълнение активни раздели.
Но такива проблеми, лишени организацията на метод раздели с помощта на елемента за въвеждане и псевдо-: проверени. Разбира се, с изключение на последния елемент. Така например, организацията на ОТО превключване логика има това:
Проблемът с освобождаването на активното раздела е сериозен характер. Но има и най-много четири решения:
- Добавяне на друга мишена елемент, но преди всяка справка - глупост.
- Плоският структурата на джаджа, както и пълна CSS свързване към структурата - не искам.
- Почти хоризонтална структура по отношение на структурата на CSS - не искам.
- Абсолютно позициониране раздели - не, няма да има ужас.
В този случай, ние се govnokod, че ще мечтая всеки ден и да напомня на своите nikchomnosti.
Подкрепа браузър
Отиди мога да използвам и да видим една прекрасна картина по отношение на целта за псевдо и първото дете.
Тестване с помощта BrowserStack върху резултатността в IE9 и сме щастливи, че всичко, което се показва правилно.
Кога да използвате табове на CSS?
Доста интересен въпрос, имайки предвид, че сте прочели най-много на статията, преди да го за това как да се направи какво се случва на CSS. Ще се опитам да му отговори.
Най-сериозната част на статията
Може би, обобщавайки, искам да си зададете един въпрос и се опитват да му отговори честно: "Дали играта струва свещ?".
И отговорът ми е - не.
Знаеш ли, дали ни харесва или не, ушичките целта ще донесат tabam за вход. им проблем е, че:
- Трябва по някакъв начин се покаже съдържанието на първия Таба - патерица.
- Проблеми с анимацията на първия елемент - патерица.
- Решаването на проблема с превъртите до желаната опция - патерица.
Трудно е да се каже нещо разбираем. Не знам. Аз не съм намерил много различни по изпълнение на разделите на CSS, и никой от тях не отговаря на моите изисквания напълно. Аз съм готов да приеме факта, че аз няма да се подчертае, активни раздели ще бъде нещастен реализация на анимация, но точно толкова дълго, колкото наш приятел на дизайнера не решите да го направите.
Ако вашият приятел, дизайнерът е решил да ги маркирате, след това имате две възможности:
- Steal далеч 4 Методи CSS3 раздели раздели съдържание (което се ползват) и наруши твърда връзка структурата на оформлението и CSS.
- Използването на JS.
Уточни, че статията "съдържание" 4 Методи CSS3 с раздели щракна раздели превключване логика и маркиране, която не отговаря на моите изисквания. Логиката на добавяне на нови раздели чрез CSS е добре, когато раздела не може да се променя за дълго време и / или не се създават автоматично.
- По-лесна за поддържане.
- Разделите на всяка CSS.
- Не е да произвежда допълнително маркиране.
- Използвайте по-семантично правилен маркиране.
- Лишен от недостатъци раздели в CSS.
И накрая, аз питам два въпроса, които ще вълнуват читателя безразличен след като прочетете тази статия:
- И това, което раздели, които използвате?
- Какво мислите за закачалките на CSS?
Благодаря ви, че се чете до края.
Споделяне на плащане на хостинг или кафе.
Колкото по-често се пие кафе, толкова повече аз пиша статията.
Свързани статии