Как сделать табы на 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).data('id')+ ']').click();
	});
});
</script>
HTML

Дополнительно скрипт поддерживает открытие табов кликом по якорным ссылкам. У ссылки должен быть class="tabs-target", href="#tabs" для того чтобы переместится к блоку с табами и атрибут data-id содержащий id вкладки.

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

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

08.02.2018, обновлено 18.10.2019
12864

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

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

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

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

Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
23361
+11
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
19411
+2
Главное меню для мобильной версии сайта
Не очень сложное раскрывающееся меню для мобильной версии сайта на JQuery.
18754
+8
Сохранить открытую вкладку в Bootstrap Tabs
В данной статье представлены два метода, как сохранить открытую вкладку в Bootstrap Tabs, поле перезагрузки страницы...
940
+2
Работа с Input Text jQuery
Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код...
64950
+9
Как изменить Favicon сайта из JavaScript
Для замены Favicon во вкладке браузера достаточно у элемента link rel="icon" в атрибуте href указать путь до нового...
679
0