Як зробити адаптивні таби (вкладки) на css без використання скриптів, forwww - блог для

Добрий вечір! Сьогодні я вам розповім, яким чином можна зробити таби (вкладки) на чистому css3 без будь-якого використання jquery або інших скриптів. Як ви вже знаєте, чим менше ви будете використовувати скриптів, тим краще для вашого сайту, і тим швидше він буде працювати. А швидкість сайту сьогодні один з найважливіших показників його ранжирування в пошукових системах.

Адаптивні вкладки (таби) на чистому css і без скриптів

Сьогодні таби є практично на будь-якому сайті. Вони необхідні для того, щоб відображати кілька областей контенту без переходу користувача на інші сторінки. Наприклад, на одному з моїх проектів з розробки інтернет-магазину на Joomla було додавання двох табів, які будуть відображати по 3 товара двох типів: «хіти продажів» і «останні». Прийнято рішення робити їх на чистому css без перезавантаження сайту непотрібними скриптами.

HTML код для табів з використанням css3 по пунктам

1. В першу чергу нам необхідно створити div з класом «tabs».

2. Додаємо безпосередньо кнопки-перемикали з ім'ям «tabs», при натисканні на які вони будуть включати вміст наших табів.

3. Додаємо їх назва через label

4. Під кнопками, які ми з Вами зробили в пунктах 1-3, ми додаємо вже безпосередньо контент, який нам потрібно виводити. У моєму випадку це три останніх товару і три кращих товару.

Кожен блок у нас має клас tab-content і ідентифікатори tab-content-1 і tab-content-2.

Підсумковий HTML наших майбутніх табів