Как сделать табы на jQuery

08.02.2018

12864

Сделать табы на 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 стили – каким будет вид и положение кнопок, вот некоторые примеры:

Вкладки сверху контента

#tabs {
	margin: 10px 0;
}
.tabs-nav {
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.tabs-nav li {
	display: block;
	float: left;
	padding: 0;
	list-style: none;
}    
.tabs-nav a {
	display: block;
	padding: 10px 20px;
	border-top: 1px solid #ccc;  
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background: #fbfbfb; 
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	color: #999;
}		
.tabs-nav li:first-child a {
	border-radius: 5px 0 0 0; 
}
.tabs-nav li:last-child a {
	display: block;
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0; 
}
.tabs-nav a.active {
	border-bottom: 1px solid #fff;
	background: #fff;
	color: #000;
}    
.tabs-items {
	border: 1px solid #ccc;
	border-radius: 0 5px 5px 5px;
	background: #fff;
	margin: -1px 0 0 0;
}
.tabs-item {
	padding: 15px;
}

CSS

Табы на всю ширину

#tabs {
	margin: 10px 0;
}
.tabs-nav {
	display: table;
	margin: 0;
	padding: 0;
	width: 100%;
}
.tabs-nav li {
	display: table-cell;
	float: none;
	margin: 0;
	padding: 0;
}    
.tabs-nav a {
	display: block;
	padding: 10px 20px;
	border-top: 1px solid #ccc;  
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background: #fbfbfb; 
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	color: #999;
}		
.tabs-nav li:first-child a {
	border-radius: 5px 0 0 0; 
}
.tabs-nav li:last-child a {
	display: block;
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0; 
}
.tabs-nav a.active {
	border-bottom: 1px solid #fff;
	background: #fff;
	color: #000;
}    
.tabs-items {
	border: 1px solid #ccc;
	border-top: none;
	border-radius: 0 0 5px 5px;
	background: #fff;
}
.tabs-item {
	padding: 15px;
}

CSS

Вкладки слева контента

#tabs {
	margin: 10px 0;
	overflow: hidden;
}
.tabs-nav {
	width: 150px;
	float: left;
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: relative;
}
.tabs-nav:after {
	content: '';
	display: inline-block;
	width: 1px;
	height: 1px;
	background: #ccc;
	position: absolute;
	top: 0px;
	right: 0px;
}
.tabs-nav li {
	display: block;
	padding: 0;
	margin: 0;
}    
.tabs-nav a {
	display: block;
	padding: 10px 20px;
	width: 100%;
	box-sizing: border-box;
	border-top: 1px solid #ccc;  
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background: #fbfbfb; 
	font-size: 16px;
	text-decoration: none;
	color: #999;
}		
.tabs-nav li:first-child a {
	border-radius: 5px 0 0 0; 
}
.tabs-nav li:last-child a {
	border-bottom: 1px solid #ccc;
	border-radius: 0 0 0 5px; 
}
.tabs-nav a.active {
	border-right: 1px solid #fff;
	background: #fff;
	color: #000;
}    
.tabs-items {
	margin-left: 149px;
	background: #fff;
}
.tabs-item {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 0 5px 5px 0;	
	min-height: 160px;
}

CSS

Вкладки справа контента

#tabs {
	margin: 10px 0;
	overflow: hidden;
}
.tabs-nav {
	width: 150px;
	float: right;
	overflow: hidden;
	margin: 0;
	padding: 0;
	position: relative;
}
.tabs-nav:after {
	content: '';
	display: inline-block;
	width: 1px;
	height: 1px;
	background: #ccc;
	position: absolute;
	top: 0px;
	left: 0px;
}
.tabs-nav li {
	display: block;
	padding: 0;
	margin: 0;
}    
.tabs-nav a {
	display: block;
	padding: 10px 20px;
	width: 100%;
	box-sizing: border-box;
	border-top: 1px solid #ccc;  
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background: #fbfbfb; 
	font-size: 16px;
	text-decoration: none;
	color: #999;
}		
.tabs-nav li:first-child a {
	border-radius: 0 5px 0 0; 
}
.tabs-nav li:last-child a {
	border-bottom: 1px solid #ccc;
	border-radius: 0 0 5px 0; 
}
.tabs-nav a.active {
	border-left: 1px solid #fff;
	background: #fff;
	color: #000;
}    
.tabs-items {
	margin-right: 149px;
	background: #fff;
}
.tabs-item {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 5px 0 0 5px;	
	min-height: 160px;
}

CSS

Табы снизу контента

Для того чтобы сделать табы снизу контента нужно изменить разметку:

<div id="tabs">
	<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>
	<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>

HTML

#tabs {
	margin: 10px 0;
}
.tabs-nav {
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.tabs-nav li {
	display: block;
	float: left;
	padding: 0;
	list-style: none;
}    
.tabs-nav a {
	display: block;
	padding: 10px 20px;
	border-top: 1px solid #ccc;  
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background: #fbfbfb; 
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	color: #999;
}		
.tabs-nav li:first-child a {
	border-radius: 0 0 0 5px; 
}
.tabs-nav li:last-child a {
	display: block;
	border-right: 1px solid #ccc;
	border-radius: 0 0 5px 0; 
}
.tabs-nav a.active {
	border-top: 1px solid #fff;
	background: #fff;
	color: #000;
}    
.tabs-items {
	border: 1px solid #ccc;
	border-radius: 5px 5px 5px 0;
	background: #fff;
	margin: 0 0 -1px 0;
}
.tabs-item {
	padding: 15px;
}

CSS

Вкладки на всю ширину

#tabs {
	margin: 10px 0;
}
.tabs-nav {
	display: table;
	margin: 0;
	padding: 0;
	width: 100%;
}
.tabs-nav li {
	display: table-cell;
	float: none;
	margin: 0;
	padding: 0;
}    
.tabs-nav a {
	display: block;
	padding: 10px 20px;
	border-top: 1px solid #ccc;  
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background: #fbfbfb; 
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	color: #999;
}		
.tabs-nav li:first-child a {
	border-radius: 0 0 0 5px; 
}
.tabs-nav li:last-child a {
	display: block;
	border-right: 1px solid #ccc;
	border-radius: 0 0 5px 0; 
}
.tabs-nav a.active {
	border-top: 1px solid #fff;
	background: #fff;
	color: #000;
}    
.tabs-items {
	border: 1px solid #ccc;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
	background: #fff;
}
.tabs-item {
	padding: 15px;
}

CSS

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

12864

#HTML #JS #Интерфейсы

4 1

Предыдущая запись Блок, фиксированный при прокрутке

Следующая запись Получить координаты курсора

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

Антон Пахомов

23 февраля 2021 в 09:38

Добрый день. Огромное спасибо за материал. Но возникла проблема: после выполнения ajax надо перекинуть пользователя на станицу в нужный таб, пробовал

window.location = '/lk/index.php#tab-2';

но не получается, открывается tab-1.
или ещё вариант, если находясь в табе2 выполнить

location.reload();

можно вернуться в таб2, а не снова таб1
Спасибо!

Ответить

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

Как сделать табы на jQuery

Вкладки сверху контента

Табы на всю ширину

Вкладки слева контента

Вкладки справа контента

Табы снизу контента

Вкладки на всю ширину

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

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