<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <style type="text/css"> * { margin: 0; padding: 0; } #eyy { width:100%; display: flex; justify-content: center; margin-bottom: 20px; justify-content: space-between; } #eyy img { height: 60px; display: flex; font-size: 20px; line-height: 60px; } #tty{ height: 175px; overflow: hidden; margin-bottom: 5px; } #tty img{ width: 100%; height: 175px; } #rrr{ height: 242px; padding: 2px; margin-left: 40%; width:17%; } </style> <div id="rrr"> <div id="eyy"> <img src="img/u12897.png" alt="" class="but"> <img src="img/u12896.png" alt=""> <img src="img/u12902.png" alt=""> </div> <div id="tty"> <img src="img/u12899.png" alt=""> <img src="img/u12900.png" alt=""> <img src="img/u12901.png" alt=""> </div> </div> <script type="text/javascript"> let but = document.getElementById("eyy").children; let tty = document.getElementById("tty").children; for (let i = 0; i < but.length; i++) { but[i].onclick = function() { console.log(but[i]) for (let j = 0; j < but.length; j++) { but[j].className = ""; tty[j].style.display = "none"; } this.className = "but"; tty[i].style.display = "block"; } } </script> </body> </html>
