не понимаю почему не работают табы
Решил просто еще раз пробежаться по табам и не могу понять что делаю не так, потому что при нажатии на "подробно" ничего не происходит
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/style.min.css">
</head>
<body>
<div class="container">
<div class="block">
<div class="block__item">
<div class="block__item__wrapper">
<div class="block__item__content block__item__content__active">
<img src="img/picture.png" alt="">
<div class="block__item__title">Пульсометр Polar FT1</div>
<div class="block__item__subtitle">Для первых шагов в тренировках, основанных на сердечном ритме</div>
<a href="#" class="block__item__content__more"> подробнее</a>
</div>
<div class="block__item__list">
<ul>
<li>Вы услышите звуковое оповещение о нужном пульсе во время тренировки;</li>
<li> Вы увидите информативный графический индикатор целевых тренировочных зон пульса;</li>
<li>Также Вы увидите информацию о расходе калорий за тренировку;</li>
<li>Вы сможете посмотреть данные по 10 тренировкам.</li>
</ul>
<a href="#" class="block__item__list__back">НАЗАД</a>
</div>
</div>
<hr>
<div class="block__item__footer">
<div>
<div class="block__item__footer__old-prise">4 750 руб.</div>
<div class="block__item__footer__prise">4 500 руб.</div>
</div>
<button>купить</button>
</div>
</div>
</div>
</div>
<script src="js/wow.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
js:
$(document).ready(function(){
$('.block__item__content__more').each(function(i){
$(this).on('click',function(e){
e.preventDefault();
$('.block__item__content').eq(i).toggleClass('block__item__content__active');
$('.block__item__list').eq(i).toggleClass('block__item__list__active');
})
})
$('.block__item__content__back').each(function(i) {
$(this).on('click', function(e) {
e.preventDefault();
$('.block__item__content').eq(i).toggleClass('block__item__content__active');
$('.block__item__list').eq(i).toggleClass('block__item__list__active');
})
})
});
scss:
*{
font-family: "Museo Sans Cyrl" sans-serif;
}
.container{
width: 940px;
display: block;
margin: 0 auto;
}
.block{
display: flex;
width: 940px;
justify-content: space-between;
&__item{
width: 300px;
min-height: 440px;
border: 2px solid #e8e8e8;
background-color: #ffffff;
overflow: hidden;
&__wrapper{
width: 200%;
display: flex;
}
&__content{
width: 50%;
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: 2s all;
&__active{
transform: translateX(0%);
}
img{
margin: 20px 80px 20px 80px;
}
&__more{
color: #c70101;
font-size: 14px;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
text-decoration: underline;
}
}
&__list{
width: 50%;
transform: translateX(0%);
transition: 2s all;
&__active{
transform: translateX(-100%);
}
&__back{
color: #c70101;
font-size: 14px;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
text-decoration: underline;
}
}
&__title{
color: #0d0d0d;
font-size: 20px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center
}
&__subtitle{
margin: 16px 40px 17px 40px;
color: #0d0d0d;
font-size: 14px;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
}
hr{
width: 260px;
height: 1px;
background-color: #e8e8e8;
}
&__footer{
margin: 21px 20px 27px 20px;
display: flex;
justify-content: space-around;
button{
width: 131px;
height: 40px;
border-radius: 5px;
background-color: #c70101;
color: #ffffff;
font-size: 14px;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
text-transform: uppercase;
}
&__old-prise{
color: #555555;
font-size: 14px;
font-weight: 300;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
text-decoration: line-through;
}
&__prise{
color: #050505;
font-size: 20px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
}
}
}
}
