Табы/вкладки на jQuery

Сделать табы на jQuery очень просто, сделаем HTML разметку и добавим к нему JS код:

<div id="tabs">
	<!-- Кнопки -->
	<ul class="tabs-nav">
		<li><a href="#tab-1">Вкладка №1</a></li>
		<li><a href="#tab-2">Вкладка №2</a></li>
		<li><a href="#tab-3">Вкладка №3</a></li>
	</ul>	
	
	<!-- Контент -->
	<div class="tabs-items">
		<div class="tabs-item" id="tab-1">
			<strong>Текст вкладки №1</strong>
		</div>
		<div class="tabs-item" id="tab-2">
			<strong>Текст вкладки №2</strong>
		</div>
		<div class="tabs-item" id="tab-3">
			<strong>Текст вкладки №3</strong>
		</div>		
	</div>
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
	var tab = $('#tabs .tabs-items > div'); 
	tab.hide().filter(':first').show(); 
	
	// Клики по вкладкам.
	$('#tabs .tabs-nav a').click(function(){
		tab.hide(); 
		tab.filter(this.hash).show(); 
		$('#tabs .tabs-nav a').removeClass('active');
		$(this).addClass('active');
		return false;
	}).filter(':first').click();

	// Клики по якорным ссылкам.
	$('.tabs-target').click(function(){
		$('#tabs .tabs-nav a[href=' + $(this).attr('href')+ ']').click();
	});
	
	// Отрытие вкладки из хеша URL
	if(window.location.hash){
		$('#tabs-nav a[href=' + window.location.hash + ']').click();
		window.scrollTo(0, $("#" . window.location.hash).offset().top);
	}
});
</script>
HTML

Дополнительно скрипт поддерживает открытие табов кликом по якорным ссылкам. У ссылки должен быть class="tabs-target" и href="#ID_ТАБА".

<a class="tabs-target" href="#tab-1">Открыть вкладку 1</a>
<a class="tabs-target" href="#tab-2">Открыть вкладку 2</a>
<a class="tabs-target" href="#tab-3">Открыть вкладку 3</a>
HTML

Далее все решают CSS стили – каким будет вид и положение кнопок, вот некоторые примеры:

08.02.2018, обновлено 06.10.2021
17990

Комментарии 1

Антон Пахомов Антон Пахомов
23 февраля 2021 в 09:38
0
Добрый день. Огромное спасибо за материал. Но возникла проблема: после выполнения ajax надо перекинуть пользователя на станицу в нужный таб, пробовал
window.location = '/lk/index.php#tab-2';
но не получается, открывается tab-1.
или ещё вариант, если находясь в табе2 выполнить
location.reload();
можно вернуться в таб2, а не снова таб1
Спасибо!

, чтобы добавить комментарий.

Другие публикации

Модальные окна на Fancybox 3
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
14627
-1
Сохранить открытую вкладку в Bootstrap Tabs
В данной статье представлены два метода, как сохранить открытую вкладку в Bootstrap Tabs, поле перезагрузки страницы...
2955
+3
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
26397
+8
Фиксированная шапка таблицы при прокрутке
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
22960
+2
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
35650
+4
Работа с checkbox в JQuery
Сборник приемов JQuery для работы с чекбоксом.
161851
+10