HTML:
<div id="plenki-tab">
<ul>
<li class="plenka-tab-active"><a href="#plenka-tab1">Полиуретановая плёнка</a></li>
<li><a href="#plenka-tab2">Литой винил</a></li>
<li><a href="#plenka-tab3">Наноплёнка</a></li>
</ul>
<div id="plenka-tab1">
<p>Полиуретановая пленка применяется, когда необходимо оклеить передний участок капота, нижнюю часть бампера и зеркала. Такую пленку часто используют автопроизводители, поэтому большинство иномарок оснащены ею уже в самом начале своей эксплуатации. По консистенции она более вязкая, чем виниловая пленка и намного толще ее.</p>
</div>
<div id="plenka-tab2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero officia unde iusto voluptatem esse officiis cupiditate doloribus perspiciatis, tenetur quidem eius asperiores voluptate soluta minus adipisci molestias in, aspernatur suscipit?</p>
</div>
<div id="plenka-tab3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit tenetur maiores quas totam aperiam quisquam perspiciatis voluptatum atque, a rerum, minima fugiat dolores, sunt consequuntur sed, ut earum iusto architecto?</p>
</div>
</div>
CSS:
#plenki-tab{
display: table-row;
width: 1170px;
height: 80px;
margin-bottom: 5px;
}
#plenki-tab li{
vertical-align: middle;
text-align: center;
display: table-cell;
font: 30px Calibri;
height: 80px;
}
.plenka-tab-active{
background: #ff020a;
}
#plenki-tab li a{
vertical-align: middle;
text-align: center;
display: table-cell;
color: #fff;
text-decoration: none;
width: 1000px;
height: 80px;
}
#plenki-tab li a:hover{}
#plenka-tab1{
padding: 20px 25px;
height: 220px;
border: 2px solid #ff020a;
}
#plenka-tab1 p{
font: 30px Calibri;
color: #fff;
}
#plenka-tab2{
padding: 20px 25px;
height: 220px;
border: 2px solid #ff020a;
}
#plenka-tab2 p{
font: 30px Calibri;
color: #fff;
}
#plenka-tab3{
height: 220px;
padding: 20px 25px;
border: 2px solid #ff020a;
}
#plenka-tab3 p{
font: 30px Calibri;
color: #fff;
}
JS/JQuery:
$('#plenki-tab').tabs();
$('#plenki-tab ul li').on({
click: function(){
$('#plenki-tab ul li').removeClass('plenka-tab-active');
$(this).addClass('plenka-tab-active');
}
});