Commit 0190f2ef authored by Sergey's avatar Sergey

Add tabs product

parent 1ccd9273
'use strict';
(function () {
function checkTab(list, current) {
list.forEach(function (item) {
if(item.classList.contains('active') && item !== current){
item.classList.remove('active');
}
})
}
var tabsList = document.querySelector('.product__tabs-list');
if(tabsList){
var tabs = tabsList.querySelectorAll('.product__tabs-item');
var contentTabs = document.querySelectorAll('.product__info-item');
tabs.forEach(function (itemTab, indexTab) {
itemTab.addEventListener('click', function () {
itemTab.classList.add('active');
checkTab(tabs, itemTab);
contentTabs[indexTab].classList.add('active');
checkTab(contentTabs,contentTabs[indexTab]);
})
})
}
})();
\ No newline at end of file
@import "../settings/color";
.product__tabs{
width: 100%;
background: rgba($color-tab,.3);
}
.product__tabs-list{
display: flex;
list-style-type: none;
padding-left: 0;
}
.product__tabs-item{
padding: 12px;
color: white;
border-right: 1px solid white;
user-select: none;
cursor: pointer;
transition: .2s;
text-transform: uppercase;
&:hover{
background: rgba($color-tab,.4);
}
}
.product__tabs-item.active{
background: $grey-text;
}
.product__info-item{
display: none;
}
.product__info-item.active{
display: block;
}
\ No newline at end of file
......@@ -7,4 +7,5 @@ $grey-text: #727272;
$footer: #333333;
$bg-slider: #c4c4c4;
$dark-text: #323232;
$grey-product: #dfdfdf;
\ No newline at end of file
$grey-product: #dfdfdf;
$color-tab: #323232;
\ No newline at end of file
<p>dadas</p>
\ No newline at end of file
<div class="wrapper product__info">
<div class="product__tabs">
<ul class="product__tabs-list">
<li class="product__tabs-item active">Характеристики</li>
<li class="product__tabs-item">Описание</li>
<li class="product__tabs-item">Габаритные схемы</li>
<li class="product__tabs-item">Техническая документация</li>
</ul>
</div>
<div class="product__info-container">
<div class="product__info-list">
<div class="product__info-item active">
<p>Эксплотационные</p>
</div>
<div class="product__info-item">
<p>Эксплотационные2</p>
</div>
<div class="product__info-item">
<p>Эксплотационные3</p>
</div>
<div class="product__info-item">
<p>Эксплотационные4</p>
</div>
</div>
</div>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment