JQuery TABS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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');
}
});