В общем реализую только информационный магазинчик с товарами.
Сделал 5 вкладок, при нажатии на вкладку меняется содержимое поля самым простым способом, через Display: none и block.
Далее задумка такая - при нажатии на картинку, картинка пропадает, а на ее месте появляется текст =)
Пока всё работает.
Но далее я сталкнулся с такой проблемой, при выборе любой вкладки кроме первой - при нажатии на картинку она пропадает, а текст не появляется. Как я понял браузер считывает код с самого начала, находит самый первый элемент с классом "description" и применяет к ниму "description_active".
А мне нужно чтобы этот класс применялся к первому классу "description" именно этой секции =/
-HTML-
<section class="care tab_content" id="care">
<div class="wrapper_care">
<div class="magazin">
<div class="product-box">
<div class="img-product">
<img src="img/kosmetic/care_1.jpg" alt="product">
</div>
<div class="description">
<p class="description_title">
- Thai-Sabai -
</p>
<p class="description_text">
Текст
</p>
</div>
<div class="product-title">
<p class="title">Очищающий гель
Moods Огурец</p>
<p class="price">580 руб.</p>
</div>
</div>
</div>
</div>
</section>
-JavaScript-
// При клике на картинку товара она скрывается и появляется текст
$('.img-product').on('click', function() {
let currTab = $(this).parent().index();
console.log(currTab);
$('.img-product').removeClass('product-box-active');
$(this).addClass('product-box-active');
$('.description').removeClass('description_active');
$('.description').eq(currTab).addClass('description_active');
})
// При клике на текст он скрывается и появлется картинка товара
$('.description').on('click', function() {
let currText = $(this).parent().index();
console.log(currText);
$('.description').removeClass('description_active');
$('.img-product').removeClass('product-box-active');
})
// Клики работают.
// При нажатии на раздел меняются секции
$('.list').on('click', function(e) {
e.preventDefault();
let categoryTab = $(this).parent().index();
console.log(categoryTab);
$('.list').removeClass('list_activ');
$(this).addClass('list_activ');
$('.description').removeClass('description_active');
$('.img-product').removeClass('product-box-active');
$('.tab_content').removeClass('tab_content_activ');
$('.tab_content').eq(categoryTab).addClass('tab_content_activ');
})
