Простые горизонтальные вкладки (табы) для сайта на jQuery/JavaScript

Вкладки (они же табы) – очень полезная вещица, которая позволяет значительно сэкономить место на вашем сайте, а также красиво структурировать ту или иную информацию. Когда я только начинал заниматься сайтами, этот функционал часто использовался в сайдбаре (боковой колонке) сайта, умещая в себе блок последних комментариев, информера свежих комментариев и, например, информера популярных материалов за некоторый период времени.

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

Поэтому я рад представить вам свой вариант реализации вкладок, который вы можете использовать в своих проектах.

Простые горизонтальные вкладки (табы) для сайта на jQuery

Прежде чем начать рассмотрение табов, логичнее всего посмотреть на то, как должен выглядеть конечный результат. И выглядит он так:

Основной контент (изображения и текст) в них адаптивен, остальное же вы дорабатываете по необходимости. Блок с вкладками занимает всю ширину области в которой находится.

Для установки табов на jQuery сделайте следующее.

1. Если у вас отсутствует библиотека jQuery, то подключите ее на вашем сайте в секцию HEAD:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

2. Далее на нужные страницы вы вставляете верстку вкладок:

<div class="main_block_tabs">
  
	<div class="menu_tabs">
		<a href="javascript: void(0);" data-item="tabs_1" class="active_tabs">Вкладка 1</a>
		<a href="javascript: void(0);" data-item="tabs_2">Вкладка 2</a>
		<a href="javascript: void(0);" data-item="tabs_3">Вкладка 3</a>
    </div>
  
	<div class="content_tabs">
		<div data-item="content_tabs_1" class="active_tabs">Содержимое 1</div>
		<div data-item="content_tabs_2">Содержимое 2</div>
		<div data-item="content_tabs_3">Содержимое 3</div>
	</div>
	
 </div>

и заполняете их необходимым содержимым.

Для создания новых вкладок дублируйте последнюю навигационную ссылку с увеличением числа в data-item, а также последний элемент data-item="content_tabs_", где число вы проставляете то же самое, что и в новой ссылке.

3. Перед закрывающим тегом </body> на тех страницах, где вы добавили табы, вставьте скрипт их обработки:

<script>
 
	$(function() {

		$(".main_block_tabs .menu_tabs a").on("click", function() {
  
			$(".main_block_tabs .menu_tabs a").removeClass("active_tabs");
			$(this).addClass("active_tabs");
  
			$(".main_block_tabs .content_tabs div[data-item*=content_tabs]").removeClass("active_tabs");
			$(".main_block_tabs .content_tabs div[data-item=\"content_"+$(this).attr("data-item")+"\"]").addClass("active_tabs");
   
		});

	}); 

</script>

4. И завершающим шагом в конец вашего файла стилей вставьте:

.main_block_tabs .content_tabs div[data-item*=content_tabs] {
	display: none;
}

.main_block_tabs .menu_tabs a {
	font-family: arial;
	padding: 11px 14px;
	display: block;
	float: left;
	text-decoration: none;
	font-size: 12px;
	border-radius: 4px 4px 0 0;
	color: #fff;
	background: #513b2d;
	margin: 0 5px 0 0;
	text-transform: uppercase;
	transition: .1s;
	font-weight: 700;
}

.main_block_tabs .menu_tabs a:hover {
	background: #5f4534;
	transition: .1s;
}

.main_block_tabs .menu_tabs a.active_tabs {
	color: #111;
	background: #f4f4f4;
	cursor: text;
}

.main_block_tabs .content_tabs div[data-item*=content_tabs].active_tabs {
	clear: both;
	display: block;
	width: 100%;
	background: #f4f4f4;
	border-radius: 0 4px 4px 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	font-size: 14px;
	font-family: arial;
	padding: 16px 20px;
	color: #333;
}

.main_block_tabs .content_tabs div[data-item*=content_tabs].active_tabs img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

Сохраните все изменения и очистите кэш, если таковой имеется. Установка закончена.

Простые горизонтальные вкладки (табы) для сайта на JavaScript

Для установки табов с использованием чистого JavaScript повторите все шаги из варианта с jQuery, единственное, что отличается – скрипт для обработки вы используете этот:

<script>

	window.onload = function () {

		var link_tabs = document.querySelectorAll(".main_block_tabs .menu_tabs a");

		for (i = 0; i < link_tabs.length; i++) {
		
			link_tabs[i].onclick = function() {
    
				[].forEach.call(document.querySelectorAll(".main_block_tabs .menu_tabs a"), function(el_tab) {
      
					el_tab.classList.remove("active_tabs");
      
				});
    
				this.classList.toggle("active_tabs");
    
				[].forEach.call(document.querySelectorAll(".main_block_tabs .content_tabs div[data-item*=content_tabs]"), function(el_tab_content) {
      
					el_tab_content.classList.remove("active_tabs");
      
				});
    
				document.querySelectorAll(".main_block_tabs .content_tabs div[data-item=\"content_"+this.getAttribute("data-item")+"\"]")[0].classList.toggle("active_tabs");
    
			}
	
		}
    
	}
	
</script>

И подключать библиотеку jQuery в таком случае не обязательно.

Остались вопросы? Пишите их в комментариях под данной статьей.