Простой скрипт вкладок (табов) на jQuery

0
109

Рассмотрим простой скрипт вкладок написанный на html, css и js (jQuery). Данный скрипт табов вы можете внедрить в любую CMS систему или в любой фреймворк.

Код HTML:

<!-- HTML BLOCK -->
<div class="tabs-wrapper">
<div class="tabs">
<span class="tab">Вкладка номер 1</span>
<span class="tab">Вкладка номер 2</span>
<span class="tab">Вкладка номер 3</span>
</div>
<div class="tabs-content">
<div class="tab-item">Содержимое вкладки номер 1</div>
<div class="tab-item">Содержимое вкладки номер 2</div>
<div class="tab-item">Содержимое вкладки номер 3</div>
</div>
</div>

Код js:

// jQuery Tabs
$('.tabs-wrapper').each(function() {
let ths = $(this);
ths.find('.tab-item').not(':first').hide();
ths.find('.tab').click(function() {
ths.find('.tab').removeClass('active').eq($(this).index()).addClass('active');
ths.find('.tab-item').hide().eq($(this).index()).fadeIn()
}).eq(0).addClass('active');
});

Код CSS:

/* CSS code */
.tabs-wrapper .tabs .tab.active {
color: #ff0000;
border-color: #ff0000;
}
.tabs-wrapper .tabs {
display: flex;
gap: 10px;
}
.tabs-wrapper .tabs .tab {
border-radius: 5px;
border: 2px solid #ECECEC;
background: #FFF;
padding: 10px 30px;
color: #888;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.tabs-wrapper .tabs-content {
border-radius: 5px;
background: #FFF;
box-shadow: 0px 4px 40px 0px rgba(98, 96, 93, 0.09);
padding: 30px;
margin-top: 20px;
}

По своему усмотрению вы можете стилизовать данный скрипт.

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь