Табы

30.06.2015

649

Табы (вкладки) один из часто применяемых элементов оформления на сайтах. Представляет собой механизм отделения блоков информации по смыслу и переключения между ними. Рассмотрим стандартное решение 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());
	})
});

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Табы Табы Табы
Единица измерения товара
Рекомендации для васЕдиница измерения товараOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.