YOUX agency

Код помогает вывести 2 ряда табов и переключать зеро блоки еще сложнее, круче, больше, ехааааа. Мучайтесь

Да, это двойные табы для переключения зеро-блоков

Заказать код
Вступить в чат
Предложить код
Видео-урок

Инструкция

1

Создайте кнопки в зеро-блок с классами .tab-btn и ссылками #tab1, #tab2

2

Новый zero-блок с кнопками и им классы .tab-tab, ссылки в них #tab-1, #tab-2 и тд.

3

Новый zero-блок с кнопками и им классы .tab-bab, ссылки в них #tar-1, #tar-2 и тд.

4

Далее добавьте ваши зеро-блоки с основным контентом и им классы .uc-tar1, uc-tar-2 для второго ряда табов uc-tab1, .uc-tab2 для первого и т.д.

5

Вставьте код на страницу

в блок "Другое" - Т123

6

Измените цвет #ff005a активной

вкладки на свой

Код скопирован
Код для вставки

<style>
	.my-active-class {
		background: #4a535e !important;
		color: #ffffff !important;
	}
</style>

<script>
	$(() => {
		const showFirstLine = () => {
			$('.tab-bab a').removeClass('my-active-class');
			$('[class*="uc-tab"]').show();
			$('[class*="uc-tab"],[class*="uc-tar"] ')
				.not('.uc-tab, .uc-tab1')
				.fadeOut(0);

			$("[href='#tab-1']").addClass('my-active-class');
			$("[href='#tab1']").addClass('my-active-class');
		};

		const showSecondLine = () => {
			$('.tab-bar a').removeClass('my-active-class');
			$('[class*="uc-tar"]').show();
			$('[class*="uc-tar"],[class*="uc-tab"] ')
				.not('.uc-tar, .uc-tar1')
				.fadeOut(0);
			$("[href='#tar-1']").addClass('my-active-class');
			$("[href='#tab2']").addClass('my-active-class');
		};

		$('.tab-btn a').click(({ currentTarget }) => {
			$('.tab-btn a').removeClass('my-active-class');
			$(currentTarget).addClass('my-active-class');
			var slide = $(currentTarget).attr('href').slice(1);
			switch (slide) {
				case 'tab1':
					showFirstLine();
					break;
				case 'tab2':
					showSecondLine();
			}
		});

		$('.uc-tab .tab-bab a').click(({ currentTarget }) => {
			$('.tab-bab a').removeClass('my-active-class');
			const number = parseInt(
				$(currentTarget)
					.addClass('my-active-class')
					.attr('href')
					.slice(-1)
			);

			$('[class*="uc-tab"]').not('.uc-tab').hide();
			$(`[class*="uc-tab${number}"]`).show();
		});

		$('.uc-tar .tab-bab a').click(({ currentTarget }) => {
			$('.tab-bab a').removeClass('my-active-class');
			const number = parseInt(
				$(currentTarget)
					.addClass('my-active-class')
					.attr('href')
					.slice(-1)
			);

			$('[class*="uc-tar"]').not('.uc-tar').hide();
			$(`[class*="uc-tar${number}"]`).show();
		});

		showFirstLine();
	});
</script>

Другие модификации