Табы

Табы (вкладки) один из часто применяемых элементов оформления на сайтах. Представляет собой механизм отделения блоков информации по смыслу и переключения между ними. Рассмотрим стандартное решение CSS + jQuery.

Верстка стандартных табов

Код в страницу

<div class="section2">
  <ul class="list_tabs2">
    <li class="act2">One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
  <div class="tab2 act" id="tab1">1</div>
  <div class="tab2" id="tab2">22</div>
  <div class="tab2" id="tab3">333</div>
  <div class="tab2" id="tab4">4444</div>
</div>

Скрипт стандартных табов

<script>
(function($) {  
$(function() {  
  
  $('ul.list_tabs2').on('click', 'li:not(.act2)', function() {  
    $(this).addClass('act2').siblings().removeClass('act2')  
    .parents('div.section2').find('div.tab2').eq($(this).index()).fadeIn(500).siblings('div.tab2').hide();  
  })  
  
})  
})(jQuery)  
</script>

CSS стандартных табов

/* CSS ТАБЫ (горизонтальные) */

.section2 {float: left; width: 100%; box-shadow: 2px 2px 6px rgba(17, 17, 17, 0.2);}

ul.list_tabs2 {float: left; width: 100% !important; margin: 0 !important;}

ul.list_tabs2 li {
    color: #fff;
    width: 20% !important;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #04427E;
    float: left;
    list-style: none;
    cursor: pointer;
    box-sizing: border-box;
}

ul.list_tabs2 li:first-child {width: 20%;}  
 
ul.list_tabs2 li:last-child {width: 20%;}  
 
ul.list_tabs2 li:hover {background-color: rgb(55, 99, 213);}

ul.list_tabs2 li.act2 {
    background-color: #fff;
    color: #000;
    height: 40px;
    line-height: 40px;
    margin-top: -10px;
    box-shadow: none;
    font-family: "PlayBold";
    border: 1px solid #ccc;
    border-width: 1px 1px 0px 1px;
}

.tab2 {display:none;}

.tab2.act2 {display:block;}

.tab2 {
    background-color: #fff;
    padding: 5%;
    float: left;
    width: 100%;
    min-height: 300px;
    border: 1px solid #ccc;
    border-width: 0px 1px 1px 1px;
    box-sizing: border-box;
}

Пример реализации табов ниже под данной статьей (Комментарии, Вложения).

Последний вариант табов

Верстка

<div class="section">
	<ul class="list_tabs">
		<li class="act">One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
	
	<div class="tab act" id="tab1">1</div>
	<div class="tab" id="tab2">22</div>
	<div class="tab" id="tab3">333</div>
</div>

Стили

.tab-section {width: 100%;}

ul.list_tabs {display: flex;}

ul.list_tabs li {
    color: #fff;
    width: 100%;
    padding: 7px 15px;
    text-align: center;
    background: #50aaff;
    list-style: none;
    cursor: pointer;
    margin: 0 !important;
}

ul.list_tabs li:hover, ul.list_tabs li.act {background: #1681e6;}

.tab {padding: 15px 0; width: 100%; min-height: 600px; display: none;}

.tab.act {display: block;}

@media screen and (max-device-width: 480px) { ul.list_tabs li {width: 100%;} }

Скрипт

jQuery(document).ready(function() {
	jQuery(function() {
		jQuery('ul.list_tabs').on('click', 'li:not(.act)', function() {  
			jQuery(this).addClass('act').siblings().removeClass('act')  
			.parents('div.section').find('div.tab').eq(jQuery(this).index()).fadeIn(500).siblings('div.tab').hide();  
		})
	})   
});

Табы с содержимым slick

При помещении галереи slick внутрь табов есть один недочет. т.к. неактивный таб становится display:none, а slick перезагружается при очередной инициации, то при появлении таба с галереей верстка в нем нарушается на несколько секунд (до перерасчета). Сделаем перезагрузку принудительной, при переключении табов. Для этого в последний вариант скрипта добавляем строку:

jQuery(document).ready(function() { 
	jQuery(function() {
		jQuery('ul.list_tabs').on('click', 'li:not(.act)', function() {  
			setTimeout(function () {  jQuery('.multiple-items').slick('setPosition');  }, 50);
			jQuery(this).addClass('act').siblings().removeClass('act')  
			.parents('div.section').find('div.tab').eq(jQuery(this).index()).fadeIn(500).siblings('div.tab').hide();  
		})
	})   
});

.multiple-items — идентификатор галереи slick.

Также привожу стили галереи slick внутри табов для товаров WC

.carousel {margin-left: -15px; margin-right: -15px;}

.carousel .multiple-items {display: flex !important; flex-wrap: wrap; margin-bottom: 25px;}

.carousel .multiple-items img {-moz-backface-visibility: visible; -webkit-backface-visibility: visible; backface-visibility: visible;}

.carousel .slick-list {min-width: 100% !important; padding-top: 15px;}

.carousel .slick-track {display: flex !important; padding-bottom: .1rem;}

.carousel .product {
    width: 25%;
    margin-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
    list-style: none;
    text-align: center;
 display: flex !important;
 height: auto; 
}

.carousel .multiple-items > .product {width: 25%;}

.carousel .product > span {
 width: 100%;
    background: #fff;
    /*padding: 20px;*/
 padding-bottom: 20px;
    text-align: center;
    position: relative;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
 transition: all 0.3s ease;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s ease 0s; 
}

.carousel .product > span:hover {box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.3); margin-top: -7px; margin-bottom: 7px;}

.carousel .product #short-description {display: none;}

.carousel .product > span img {width: 100%; margin-bottom: 10px;}

Slide эффект при переключении меню табов

Создадим эффект плавного перемещения подчеркивания у меню табов

Верстка:

<div class="radio_wrap">
  <div>tab1</div>
  <div>tab2</div>
  <div>tab3</div>
  <div>tab4</div>
</div>

Стили:

.radio_wrap {position: relative; --i: 0; display: flex;}

.radio_wrap:before {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #eee;
    transition: .3s ease-in-out;
}

.radio_wrap:after {
    content: "";
    position: absolute;
    width: 25%;
    bottom: 0;
    left: calc( var(--i) * 25%);
    height: 2px;
    background: #8BC34A;
    transition: .3s ease-in-out;
}

.radio_wrap > div {width: 25%; text-align: center; padding: 20px; cursor: pointer;}

При необходимости можно сделать не в виде подчеркивания, а виде полной заливки. Класс .radio_wrap:before не обязателен.

Скрипт:

jQuery(document).ready(function() {
	$('.radio_wrap > div').click(function() {
		$('.radio_wrap').attr('style','--i:'+$(this).index());
	})
});

Метод работает при условии 4 табов. Сделаем его динамическим. Скроем стили у ul.list_tabs:after:

width: 25%;
left: calc( var(--i) * 25%);

Добавим скрипт. Влиять через функцию .css мы не можем, т.к. DOM не видит элементы :after. поэтому будем добавлять стили в подвал:

if($("ul").is(".list_tabs")) {
	$('ul.list_tabs > li').click(function() {
		$('ul.list_tabs').attr('style','--i:'+$(this).index());
	})
		
	var Numlist = $("ul.list_tabs").children('li').length;
	var Numlistpro = (100 / Numlist).toFixed(2);
	var Numlistprocss = '<style>ul.list_tabs:after {width:' + Numlistpro + '%; left: calc( var(--i) * ' + Numlistpro + '%);}</style>';
	$("footer").append(Numlistprocss);
}

Табы с отдельным блоком управления

Выше рассматривались табы объединенные одним блоком. Это в целом верно, для того чтобы например выводить несколько табов на странице. Но если функционал с табами используется например в навигации и является уникальным, то можно полностью отделить блок переключения от блока контента.

<ul class="tab-menu">
	<li id="tab-description" class="active">Описание</li>
	<li id="tab-plan" >План</li>
	<li id="tab-price" >Прайс</li>
	<li id="tab-place" >Место</li>
	<li id="tab-gallery" >Галерея</li>		
</ul>

<div class="tab-content">
	<div class="tab-description active">Описание</div>
	<div class="tab-plan">План</div>
	<div class="tab-price">Прайс</div>
	<div class="tab-place">Место</div>
	<div class="tab-gallery">Галерея</div>	
</div>

Скрипт по переключению:

jQuery(document).ready(function($) {   
	$('.tab-menu li').on('click', function(){
		var identy = $(this).attr('id');
		$('.tab-content > *, .tab-menu li').removeClass('active');
		$('.tab-content > *.' + identy).addClass('active');
		$(this).addClass('active');
	});
});

Стили:

.tab-content > * {display: none;}
.tab-content > *.active {display: block;}

[site-socialshare]