[вёрстка] Как сделать вкладки (табы) на чистом CSS и HTML без JavaScript
В наше время никого уже не удивишь выпадающим меню, сделанном на чистом CSS без использования JavaScript — теперь все так делают. Если же нужно оформить контент на странице в виде вкладок (табов), всё еще часто прибегают к помощи JavaScript. Однако многие и не догадываются, какие потрясающие вещи позволяет делать современный CSS. Существует несколько способов добавить на сайт табы, используя только CSS и ни строчки кода скриптов. В этой серии статей я расскажу вам о них.
Я буду писать с учётом того, что читатель не только хочет получить готовый пример кода для вставки на сайт, но и разобраться с CSS и научиться вёрстке.
Есть, как минимум, 4 метода организации вкладок на чистом CSS. Самый старый из мне известных — работает при помощи шаманства с overflow. Второй — самый удобный и технологичный (на мой взгляд) — основан на использовании свойства :checked и радио-кнопок (переключателей). Третий использует :target. Четвёртый позволяет переключать вкладки по наведению мыши, без щелчка.