WebDesign Master
Курсы
Простая реализация табов на jQuery

Простая реализация табов на jQuery

Всем привет! Сегодня мы рассмотрим самый простой способ сделать табы (tabs) на jQuery.

Простая реализация табов на jQuery - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Скрипт табов на 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

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Верстка»

  • Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP)
  • Создание крутого 3D сайта с анимацией прокрутки
  • Создание потрясающей галереи на HTML, CSS и JavaScript
  • Создание крутой 3D сцены (CSS + HTML) с эффектным дизайном
  • Создание крутого Swiper-слайдера от А до Я | Материалы курса
  • Создание пользовательского курсора с красивой анимацией. CSS / JavaScript / GSAP. Видеоурок и материалы

Разделы

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Верстка
  • CMS

Полезное

  • Настройка WSL
  • Окружение без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp
2022 © WebDesign Master