Добрый день! Написал код на js для табов, но почему то не работает, можете посмотреть ошибки, либо дополнить,порекомендовать литературу и т.д., заранее спасибо)
Верста и код js:
<div class="products__content">
<!--<div class="products-type">-->
<ul class="products-type__list">
<li class="products-type__list-item">
<!--<a href="" class="products-type__list-link">Бетон</a>-->
Бетон
</li>
<li class="products-type__list-item">
<!--<a href="" class="products-type__list-ink">Растворы</a>--> Растворы
</li>
</ul>
<!--</div>-->
<!-- Бетон -->
<div class="products main-page__products-list products-carousel">
<div class="card card_hover product-card main-page__product-card">
<div class="product-title">
<p class="product-name">Бетон</p>
<p class="product-code">
<span class="product-code_bold">М300</span> (B‑20)
</p>
</div>
<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
<div class="product-card__price-wrapper">
<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./ м3</p>
</div>
<div class="product-card__enter">
<a href="product.html">
<img src="images/icons/jump.svg" alt="">
</a>
</div>
</div>
<div class="card card_hover product-card main-page__product-card">
<div class="product-title">
<p class="product-name">Бетон</p>
<p class="product-code">
<span class="product-code_bold">М350</span> (B‑15)
</p>
</div>
<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
<div class="product-card__price-wrapper">
<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./ м3</p>
</div>
<div class="product-card__enter">
<a href="product.html">
<img src="images/icons/jump.svg" alt="">
</a>
</div>
</div>
<div class="card card_hover product-card main-page__product-card">
<div class="product-title">
<p class="product-name">Бетон</p>
<p class="product-code">
<span class="product-code_bold">М170</span> (B‑35)
</p>
</div>
<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
<div class="product-card__price-wrapper">
<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./ м3</p>
</div>
<div class="product-card__enter">
<a href="product.html">
<img src="images/icons/jump.svg" alt="">
</a>
</div>
</div>
<div class="card card_hover product-card main-page__product-card">
<div class="product-title">
<p class="product-name">Бетон</p>
<p class="product-code">
<span class="product-code_bold">М150</span> (B‑7)
</p>
</div>
<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
<div class="product-card__price-wrapper">
<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./ м3</p>
</div>
<div class="product-card__enter">
<a href="product.html">
<img src="images/icons/jump.svg" alt="">
</a>
</div>
</div>
</div>
<!-- Растворы -->
<div class="products main-page__products-list owl-carousel products-carousel" style="display: none;">
<div class="card card_hover product-card main-page__product-card">
<div class="product-title">
<p class="product-name">Раствор</p>
<p class="product-code">
<span class="product-code_bold">М300</span> (B‑20)
</p>
</div>
<p class="product-card__text">cxszcxНесущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
<div class="product-card__price-wrapper">
<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./ м3</p>
</div>
<div class="product-card__enter">
<a href="product.html">
<img src="images/icons/jump.svg" alt="">
</a>
</div>
</div>
<div class="card card_hover product-card main-page__product-card">
<div class="product-title">
<p class="product-name">Раствор</p>
<p class="product-code">
<span class="product-code_bold">М350</span> (B‑15)
</p>
</div>
<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
<div class="product-card__price-wrapper">
<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./ м3</p>
</div>
<div class="product-card__enter">
<a href="product.html">
<img src="images/icons/jump.svg" alt="">
</a>
</div>
</div>
<dive class="card card_hover product-card main-page__product-card">
<div class="product-title">
<p class="product-name">Раствор</p>
<p class="product-code">
<span class="product-code_bold">М170</span> (B‑35)
</p>
</div>
<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
<div class="product-card__price-wrapper">
<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./ м3</p>
</div>
<div class="product-card__enter">
<a href="product.html">
<img src="images/icons/jump.svg" alt="">
</a>
</div>
</dive>
<div class="card card_hover product-card main-page__product-card">
<div class="product-title">
<p class="product-name">Раствор</p>
<p class="product-code">
<span class="product-code_bold">М150</span> (B‑7)
</p>
</div>
<p class="product-card__text">Несущие стены, плиты перекрытий, балки, колонны, фундаменты</p>
<div class="product-card__price-wrapper">
<p class="price product-card__price">От<br><span class="price__value">2750</span> руб./ м3</p>
</div>
<div class="product-card__enter">
<a href="product.html">
<img src="images/icons/jump.svg" alt="">
</a>
</div>
</div>
</div>
<a href="catalog.html" class="btn btn_dark products__btn">Смотреть каталог</a>
<div class="slider-arrows products__slider-arrows">
<div class="slider-btn slider-btn_prev"></div>
<div class="slider-btn slider-btn_next"></div>
</div>
</div>
(function($){
jQuery.fn.lightTabs = function(options){
var createTabs = function(){
tabs = this;
i = 0;
showPage = function(i){
$(tabs).children(".products__content").children(".products").eq(i).hide();
$(tabs).children(".products__content").children(".products").eq(i).show();
$(tabs).children("ul").children("li").removeClass("active");
$(tabs).children("ul").children("li").eq(i).addClass("active");
}
showPage(0);
$(tabs).children("ul").children("li").each(function(index, element){
$(element).attr("data-page", i);
i++;
});
$(tabs).children("ul").children("li").click(function(){
showPage(parseInt($(this).attr("data-page")));
});
};
return this.each(createTabs);
};
})(jQuery);
$(document).ready(function(){
$(".products__content").lightTabs();
});