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

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

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

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

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

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

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

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

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

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