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

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

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

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

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

  • Создание красивого сайта с горизонтальным Parallax эффектом | Материалы урока
  • Создание сайта портфолио с крутой анимацией | Материалы урока
  • Создание красивого сайта с Parallax эффектом при скролле | Материалы урока
  • Создание Parallax эффекта на сайте при движении мыши | Материалы урока
  • Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока
  • Создание крутого 3D сайта с анимацией прокрутки | Материалы урока

Разделы сайта:

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

Полезные ресурсы:

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