Здравствуйте,
есть необходимость сделать карточку товара, одно большое изображение и 5 цветов в виде миниатюр, при нажатии, меняется основное изображение. Функционал вроде я реализовал, но никак не разберусь с активным элементом, необходимо, чтобы по умолчанию был выбран первый элемент (синяя рамка вокруг миниатюры), а при последующем нажатии удалялся активный класс и добавлялся нажатой миниатюре.
Карточки будут менятся в зависимости он содержание заголовка h2. также подтягивать необходимые изображения
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Привет HTML</title>
<style type="text/css">
.wraper {
display: flex;
justify-content: space-around;
}
.active {
margin: -3px;
border: 3px solid #597df7;
}
.item_max {
height: 400px;
width: 150px;
cursor: pointer;
}
.item {
height: 100px;
width: 70px;
cursor: pointer;
box-shadow: 0.4em 0.4em 5px rgb(122 122 122 / 50%);
}
.item1 {background: url(images/1Ualy.jpg)}
.item2 {background: url(images/1Umag.jpg)}
.item3 {background: url(images/1Udark.jpg)}
.item4 {background: url(images/1Uman.jpg)}
.item5 {background: url(images/1Usand.jpg)}
</style>
</head>
<body>
<span>Модель:</span>
<h2>1U</h2>
<div id="wraper" class="wraper">
<div id="big" class="item_max">Аляска</div>
<div class="item item1 active" id="aly">Аляска</div>
<div class="item item2" id="sand">Манхеттен</div>
<div class="item item3" id="man">Санд</div>
<div class="item item4" id="mag">Грей</div>
<div class="item item5" id="dark">Магнолия</div>
</div>
<script>
let model = document.querySelector('h2').innerHTML;
let aly = document.getElementById('aly');
let sand = document.getElementById('sand');
let man = document.getElementById('man');
let mag = document.getElementById('mag');
let dark = document.getElementById('dark');
const colors = [aly, sand, man, mag, dark];
const bigPic = document.getElementById("big");
bigPic.style.backgroundImage = 'url(images/' + model + colors[0].id + '.jpg)';
for (let i = 0; i < colors.length; i++) {
colors[i].onclick = function () {
bigPic.style.backgroundImage = 'url(images/' + model + colors[i].id + '.jpg)';
};
colors[i].className += ' active';
}
</script>
</body>