📑 Вкладинки

Вкладинки - це графічний функціональний елемент вебсторінки, який дозволяє оптимізувати розміщення інформації. Зазвичай у вкладинках розміщують:

• Етапи роботи
• Розділи предметної області
• Види дій
• Задачі

Особливості реалізації

Необхідно створити окремі класи для вкладок і контенту

.tab {float: left; } - щоб виводити вкладки в рядок

.content {clear: both; } - щоб виводити контент з нового рядка

Контенту задати властивість display=none, щоб початково приховати

Алгоритм опрацювання

Робимо список вкладок tabs і список контенту content (getElementsByClassName)

Прив’язуємо функцію до кожної вкладки addEventListener (в циклі)

this дозволяє знати, яку вкладку клацнули

Перебираємо вкладки, і якщо tabs[i] == this, то цей номер контенту content[i] показуємо style.display = "block";

Стилі

Окремі класи з оформленням для панелі вкладок і панелі контенту

Підсвітлювання кольором активної вкладки

Форма вкладок з заокругленням

Приклади