Javascript - Табы на jquery

Табы на jqueryТабы на jquery.
Скрипт:

$('.tabs__link').on('click', function () {
$('.tabs__link').removeClass('tabs__link--active');
$('.tabs__content').hide();
$index = $(this).index();
$(this).addClass('tabs__link--active');
$('.tabs__content').eq($index).show('slow');
})

Верстка

<div class="personal__tabs tabs">
<div class="tabs__header">
<span class="tabs__link tabs__link--active personal__capture">
Мои заказы
</span>
<span class="tabs__link personal__capture">
Товары
</span>
<span class="tabs__link personal__capture">
Отслеживание груза
</span>
<span class="tabs__link personal__capture">
Моя компания
</span>
<span class="tabs__link personal__capture">
Ваш менеджер
</span>
</div>
<div class="tabs__body">
<div class="tabs__content tabs__content--active">
Степаненко Наталья Юрьевна 1
</div>
<div class="tabs__content">
Степаненко Наталья Юрьевна 2
</div>
<div class="tabs__content">
Степаненко Наталья Юрьевна 3
</div>
<div class="tabs__content">
Степаненко Наталья Юрьевна 4
</div>
<div class="tabs__content">
Степаненко Наталья Юрьевна 5
</div>
</div>
</div>

Стили (scss):

.tabs {
margin-top: 30px;
&__link {
display: inline-block;
cursor: pointer;
padding: 16px 20px 15px;
font-size: 14px;
margin-bottom: 0;
border-radius: 5px 5px 0 0;
&--active, &:hover {
background: #1C1D26;
opacity: 1;
}
}
&__body {
padding: 30px;
background: #1C1D26;
}
&__content {
display: none;
&--active {
display: block;
}
}
}⁠

сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне на почту: Контакты, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей