Для поліпшення сприйняття вашого контенту користувачем, його можна розбити по вкладках. В основному вкладки вони повсюдно використовуються в інтернет магазинах на сторінці товару, для компактного відображення Описи, Характеристик і Відгуків.
Але ніхто вас не обмежує в галузі використання вкладок, головне знати як вони створюються, про що ми сьогодні і поговоримо
Основна особливість вкладок - це їх функціональність. Для користувача видно все назви вкладок, але при цьому відображається вміст тільки одного, активної-поточної вкладки.
Для реалізації цього функціоналу наших вкладок ми будемо використовувати бібліотеку jQuery.
HTML структура jQuery Tabs
Структурно наші вкладки вдають із себе список з якірних посилань і блоки з контентом.
Ось так виглядають jQuery Tabs без стилів і скриптів:
CSS стилі для jQuery Tabs
З стилями для jQuery Tabs тут кожен може робити що хоче. Є момент з відображенням блоків з вмістом, їх я вирішив не приховувати за допомогою стилів, а зробити це через скрипт. Для цього є причина, на випадок, якщо скрипт не завантажили або користувач відключив підтримку скриптів в своєму браузері, вміст jQuery Tabs буде відображено і наші вкладки будуть функціонувати, як звичайні якірні посилання.
У своєму прикладі я вирішив зробити мінімальну стилізацію, щоб не ускладнювати саму задачу реалізації jQuery Tabs.
Нам необхідно, за допомогою стилів, вибудувати список посилань (вкладок) в один рядок і дати всьому цілісний вигляд.
Ось буквально 8 рядків коду і наші вкладки взяли визнаний вид. продовжимо
Скрипт jQuery Tabs
Останній крок - це написання невеликого скрипта для того, щоб наші вкладки змогли працювати коректно.
Нам потрібно зробити:
1. Сховати весь контент і відобразити контент першої вкладки (про це я писав вище, що контент вкладок ми приховуємо скриптом, а не стилями);
2. Прив'язати подія клік по вкладках, при якому натиснута вкладка стає активною (додається клас active) і відображається вміст вкладки.
Ось і все завдання.