Табы
Для создания табов можно использовать AlpineJS. Преимущество такого способа в том, он не будет иметь зависимостей и полностью настраиваются под любой дизайн. Визуально это может выглядеть так:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur posuere porta. Aenean sit amet tincidunt libero. Vivamus ut tellus pharetra, porta leo sit amet, vehicula velit. Nunc condimentum libero dolor, suscipit congue risus vulputate eget. Suspendisse fermentum et justo a placerat. Nam eu metus tincidunt, rhoncus lectus eget, porta mauris. Nunc imperdiet varius quam non euismod. Sed tristique auctor turpis ut tincidunt. Mauris vel arcu dolor. Aliquam pulvinar venenatis purus, in condimentum risus eleifend ut. Fusce molestie lorem metus, eu congue leo posuere id. Donec ullamcorper hendrerit nibh maximus volutpat. Nulla turpis lectus, accumsan eu lacinia non, consectetur sit amet sapien. Quisque mollis nibh id urna consectetur, quis tincidunt massa fermentum. Etiam maximus eget urna at elementum.
Suspendisse feugiat ligula id sapien rutrum laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec condimentum, mauris in fermentum fermentum, nulla velit auctor odio, ut feugiat tellus dolor vel leo. Etiam porttitor ipsum ex, non pellentesque justo dignissim ut. Sed vel justo mauris. Donec hendrerit posuere ex. Mauris gravida, quam vitae elementum condimentum, magna magna rutrum eros, quis pretium justo ex a sem. Vivamus quis aliquam ante.
Praesent id gravida dui, ac pretium sem. Nunc et metus fringilla, maximus est vel, volutpat sem. Proin pellentesque nulla ut neque gravida suscipit. Maecenas tempor ut lectus dapibus semper. Phasellus in bibendum quam. Integer egestas ipsum a massa rutrum molestie. Phasellus egestas mauris in tellus bibendum, tincidunt ultricies arcu tristique. Vestibulum ac nisi eget tortor tempus tempus sit amet quis dolor.
<!-- общий блок табов -->
<div x-data="{tab: 1, btnCount: 0, cssActive: 'bg-primary600 t-white', cssInactive: 'bg-gray500 t-white', cssDefault: 'button rounded0 rounded10-t mar3-r'}" class="mar30-tb">
<!-- заголовки табов -->
<span x-data="{ id: ++btnCount }" :class="[tab == id ? cssActive : cssInactive, cssDefault]" @click="tab = id">Tab1</span>
<span x-data="{ id: ++btnCount }" :class="[tab == id ? cssActive : cssInactive, cssDefault]" @click="tab = id">Tab2</span>
<span x-data="{ id: ++btnCount }" :class="[tab == id ? cssActive : cssInactive, cssDefault]" @click="tab = id">Tab3</span>
<!-- общий контейнер вкладок -->
<div x-effect="Array.from($el.children).forEach((child, index) => child.style.display = (index + 1 === tab) ? '' : 'none')" class="pad20-rl pad20-t bordered rounded10-b rounded10-r" x-cloak>
<!-- каждая вкладка в отдельном блоке -->
<div class="animation-fade">
Таб 1
</div>
<div class="animation-fade">
Таб 2
</div>
<div class="animation-fade">
Таб 3
</div>
</div>
</div>
Общий div-контейнер содержит переменные:
tab— номер активной вкладкиbtnCount— служебный счетчикcssActive— классы для активного заголовка табаcssInactive— классы для неактивных заголовковcssDefault— классы по умолчанию для всех заголовков
Заголовки табов размещаются в элементах <span>, но вы можете использовать другие под свою задачу. Код для <span> один для всех кнопок. Внутри этого тэга нужно разместить заголовок таба. При необходимости можно добавить свои css-классы.
Контейнер вкладок содержит служебный код, а также произвольные css-классы, через которые можно поменять его оформление.
Каждая вкладка размещается в отдельном div-блоке, где можно указать произвольные css-классы. Сейчас здесь указаны классы анимации при появлении блока.
Количество заголовков должно соответствовать количеству блоков вкладок.