Add tabs product

src/js/product-tabs.js

+'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

src/scss/product-info/product-info.scss

+@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

src/scss/settings/color.scss

@@ -8,3 +8,4 @@ $footer: #333333;
 $bg-slider: #c4c4c4;
 $dark-text: #323232;
 $grey-product: #dfdfdf;
+$color-tab: #323232;
\ No newline at end of file

src/template/product-info/index.html

-<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