|
Сообщение от rodion7195
|
|
А зачем у картинки менять класс?
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.content{
position: relative;
}
.content img{
position: absolute;
opacity: 0;
transform: scale(0);
transition: all 1.2s ease-in-out;
display: block;
}
.content img.active{
opacity: 1;
transform: scale(1);
}
.content .pic.active{
background-color: #8B4513;
color: #FFFFFF;
}
</style>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
var content = document.querySelector(".content");
content.addEventListener("click", function(event) {
var target = event.target;
if (target = target.closest(".pic")) {
event.preventDefault();
var a = content.querySelectorAll(".pic");
var img = content.querySelectorAll("img");
var selected = [].indexOf.call(a, target);
[].forEach.call(a, function(el, i) {
(i == selected) ? (el.classList.add("active"), img[i].classList.add("active")):
(el.classList.remove("active"), img[i].classList.remove("active"))
})
}
})
});
</script>
</head>
<body>
<div class="content">
<a href="" class="pic active">1картинка</a>
<a href="" class="pic">2картинка</a>
<a href="" class="pic">3картинка</a>
<img src="https://s1.1zoom.ru/prev2/514/Cats_Glance_Whiskers_513437_300x200.jpg" alt="" class="active">
<img src="https://trackimo.com/wp-content/uploads/2016/05/TRACKIMO-FI-5-Year-Study-Reveals-Shocking-Statistics-on-Lost-Pets-300x200.jpg" alt="">
<img src="https://www.walldevil.com/wallpapers/w02/thumb/812503-cats-kittens-siamese.jpg" alt="">
</div>
</body>
</html>