Поиск

Как сделать табы на 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 3585

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

Сборник приемов JQuery для работы с чекбоксом.
14.12.2016 52951
Fancybox 2 не только плагин галерей, но и модальных окон, рассмотрим подробнее.
19.09.2019 539
Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это...
14.11.2019 54
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
03.04.2019 2384
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
03.12.2016 8916
Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
16.02.2019 2019