Уникальные вкладки (табы) на CSS3 и jQuery

Разместил: Apocalypse
13 июня 2016

Очень необычные и хорошо проработанные вкладки, которые выполнены с использованием CSS3 и jQuery Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.wrappers {
margin: 150px;
width: 80%;
font-family: sans-serif;
color: #98927C;
font-size: 14px;
line-height: 24px;
max-width: 600px;
min-width: 340px;
overflow: hidden;
}

.wrappers * {
margin: 0px;
padding: 0px;
}

.tabs li {
list-style: none;
float: left;
width: 20%;
}

.tabs a {
display: block;
text-align: center;
text-decoration: none;
position: relative;
text-transform: uppercase;
color: #fff;
height: 70px;
line-height: 90px;
background: linear-gradient(165deg, transparent 29%, #98927C 30%);
}

.tabs a:hover,
.tabs a.active {
background: linear-gradient(165deg, transparent 29%, #F2EEE2 30%);
color: #98927C;
}

.tabs a:before {
content: '';
position: absolute;
z-index: 11;
left: 100%;
top: -100%;
height: 70px;
line-height: 90px;
width: 0;
border-bottom: 70px solid rgba(0, 0, 0, 0.1);
border-right: 7px solid transparent;
}

.tabs a.active:before {
content: '';
position: absolute;
z-index: 11;
left: 100%;
top: -100%;
height: 70px;
line-height: 90px;
width: 0;
border-bottom: 70px solid rgba(0, 0, 0, 0.2);
border-right: 20px solid transparent;
}

.tabgroup {
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
}

.tabgroup div {
padding: 30px;
background: #F2EEE2;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.clearfix:after {
content: "";
display: table;
clear: both;
}

.wrappers {

margin: 150px;

width: 80%;

font-family: sans-serif;

color: #98927C;

font-size: 14px;

line-height: 24px;

max-width: 600px;

min-width: 340px;

overflow: hidden;

}

.wrappers * {

margin: 0px;

padding: 0px;

}

.tabs li {

list-style: none;

float: left;

width: 20%;

}

.tabs a {

display: block;

text-align: center;

text-decoration: none;

position: relative;

text-transform: uppercase;

color: #fff;

height: 70px;

line-height: 90px;

background: linear-gradient(165deg, transparent 29%, #98927C 30%);

}

.tabs a:hover,

.tabs a.active {

background: linear-gradient(165deg, transparent 29%, #F2EEE2 30%);

color: #98927C;

}

.tabs a:before {

content: '';

position: absolute;

z-index: 11;

left: 100%;

top: -100%;

height: 70px;

line-height: 90px;

width: 0;

border-bottom: 70px solid rgba(0, 0, 0, 0.1);

border-right: 7px solid transparent;

}

.tabs a.active:before {

content: '';

position: absolute;

z-index: 11;

left: 100%;

top: -100%;

height: 70px;

line-height: 90px;

width: 0;

border-bottom: 70px solid rgba(0, 0, 0, 0.2);

border-right: 20px solid transparent;

}

.tabgroup {

box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);

}

.tabgroup div {

padding: 30px;

background: #F2EEE2;

box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);

}

.clearfix:after {

content: "";

display: table;

clear: both;

}

2#: HTML код вкладок:

<div class="wrappers">
<ul class="tabs clearfix" data-tabgroup="first-tab-group">
<li><a href="#tab1" class="active">Вкладка 1</a></li>
<li><a href="#tab2">Вкладка 2</a></li>
<li><a href="#tab3">Вкладка 3</a></li>
<li><a href="#tab4">Вкладка 4</a></li>
<li><a href="#tab5">Вкладка 5</a></li>
</ul>
<section id="first-tab-group" class="tabgroup">
<div id="tab1">
<h2>Заголовок 1</h2>
<p>Здесь может быть любая ваша информация.</p>
</div>
<div id="tab2">
<h2>Заголовок 2</h2>
<p>Здесь может быть любая ваша информация.</p>
</div>
<div id="tab3">
<h2>Заголовок 3</h2>
<p>Здесь может быть любая ваша информация.</p>
</div>
<div id="tab4">
<h2>Заголовок 4</h2>
<p>Здесь может быть любая ваша информация.</p>
</div>
<div id="tab5">
<h2>Заголовок 5</h2>
<p>Здесь может быть любая ваша информация.</p>
</div>
</section>
</div>

<script>
$('.tabgroup > div').hide();
$('.tabgroup > div:first-of-type').show();
$('.tabs a').click(function(e){
e.preventDefault();
var $this = $(this),
tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
others = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
others.removeClass('active');
$this.addClass('active');
$(tabgroup).children('div').hide();
$(target).show();
});
</script>

<li><a href="#tab1" class="active">Вкладка 1</a></li>

<li><a href="#tab2">Вкладка 2</a></li>

<li><a href="#tab3">Вкладка 3</a></li>

<li><a href="#tab4">Вкладка 4</a></li>

<li><a href="#tab5">Вкладка 5</a></li>

</ul>

<h2>Заголовок 1</h2>