const colors = document.getElementById("colors");
const shoes = document.getElementById("shoes-img");
const colors1 = document.getElementById("colors1");
const shoes1 = document.getElementById("shoes-img1");
colors.addEventListener('click', e => {
const currTab = e.target.dataset.span;
changeClass(e.target);
for(let i = 0; i < shoes.children.length; i++) {
shoes.children[i].classList.remove('active');
if(shoes.children[i].dataset.color == currTab) {
shoes.children[i].classList.add('active');
}
}
});
const changeClass = el => {
for(let i = 0; i < colors.children.length; i++) {
colors.children[i].classList.remove('active');
}
el.classList.add('active');
}
colors1.addEventListener('click', e => {
const currTab1 = e.target.dataset.span;
changeClass1(e.target);
for(let i = 0; i < shoes1.children.length; i++) {
shoes1.children[i].classList.remove('active');
if(shoes1.children[i].dataset.color == currTab1) {
shoes1.children[i].classList.add('active');
}
}
});
const changeClass1 = el => {
for(let i = 0; i < colors1.children.length; i++) {
colors1.children[i].classList.remove('active');
}
el.classList.add('active');
}```