Создаем Zero block, размещаем в нем 2 кнопки, которым присваиваем css классы TabOne и TabTwo.
Далее создаем 2 Zero block, наполняем нужным контентом, адаптируем. Копируем код на страницу в блок T123, заменяем id блоков на свои, смотрим за комментариями в коде, чтобы не допустить ошибок.
Код разделил на 2 части:
1 - скрипт;
2 - стили оформления кнопок.
Цвет текста кнопки настройте в редакторе, остальное в коде, вынес вверх переменными, для удобства.
PS
В качестве вкладок можно использовать любой блок, просто впишите его id в скрипт. Так же можно добавить любое кол-во вкладок.
_______________________________________________________________________________________
<script> var TabOne = '.TabOne';
var TabTwo = '.TabTwo';
var BlockOne = '#rec256596753'; //id первого блока (открытого изначально) var BlockTwo = '#rec256599399'; //id второго блока (который появится при клике) $(BlockTwo).hide(); $(TabOne).addClass('ActiveTab'); $(TabTwo).on('click', function(){ $(TabOne).removeClass('ActiveTab'); $(TabTwo).addClass('ActiveTab'); $(BlockOne).slideUp(); $(BlockTwo).slideDown(); }); $(TabOne).on('click', function(){ $(TabTwo).removeClass('ActiveTab'); $(TabOne).addClass('ActiveTab'); $(BlockOne).slideDown(); $(BlockTwo).slideUp(); }); </script>
И скрипт для анимации кнопок:
<style>
:root {
--bg-color-primary:#000; /*Цвет фона кнопки*/ --bg-color-secondary:#fde51c; /*Цвет фона АКТИВНОЙ кнопки*/ --txt-color-active:#000 /*Цвет текста АКТИВНОЙ кнопки*/ }
/*Ниже без изменений*/
.TabOne,
.TabTwo {
cursor:pointer;
}
.TabOne .tn-atom,
.TabTwo .tn-atom {
color .5s ease-in-out!important;
background:transparent!important;
}
.TabOne::before,
.TabTwo::before {
content:"";
display: block;
position: absolute;
z-index:-1;
left: 0;
bottom: 0;
height: 100%;
background: var(--bg-color-primary);
width: 100%;
transition:all .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.TabOne::after,
.TabTwo::after {
content:"";
display: block;
position: absolute;
z-index:-2;
left: 0;
bottom: 0;
height: 5px;
background: var(--bg-color-secondary);
width: 100%;
transition:all .5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.ActiveTab::before {
height: 5px!important;
background: var(--bg-color-primary);
}
.ActiveTab::after {
height: 100%!important;
background: var(--bg-color-secondary);
}
.ActiveTab .tn-atom {
color:var(--txt-color-active)!important;
transition: color .5s ease-in-out!important;
}
</style>
В результате у вас должно получится:
Удачных проектов.
