Всем привет! Сегодня мы рассмотрим самый простой способ сделать табы (tabs) на jQuery.
Скрипт табов на jQuery
Комплексный доработанный скрипт табов, включающий HTML, CSS, JS:
<!-- HTML --> <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>
/* CSS */ .tabs-wrapper .active { color: red; }
// jQuery $('.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'); });
Премиум уроки от WebDesign Master
Другие уроки по теме «Верстка»
- Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP)
- Создание крутого 3D сайта с анимацией прокрутки
- Создание потрясающей галереи на HTML, CSS и JavaScript
- Создание крутой 3D сцены (CSS + HTML) с эффектным дизайном
- Создание крутого Swiper-слайдера от А до Я | Материалы курса
- Создание пользовательского курсора с красивой анимацией. CSS / JavaScript / GSAP. Видеоурок и материалы