por ejemplo, todas las imágenes están ocultas y cuando hago clic en la lista, debería aparecer. si hago clic en el texto "Hello1", entonces image1 debería aparecer
<li class nav-1><a href="#">Hello1</a></li> <li class nav-1><a href="#">Hello2</a></li> <li class nav-1><a href="#">Hello3</a></li> <img src="images/1.jpg" alt=""/> <img src="images/2.jpg" alt=""/> <img src="images/3.jpg" alt=""/>Agregaría identificaciones a sus imágenes y colocaría un script básico para ocultar/mostrar:
<script> function toggleHide(elementid){ a=document.getElementById(elementid).style.visibility; if (a=="hidden"){ document.getElementById(elementid).style.visibility="visible"; }else{ document.getElementById(elementid).style.visibility="hidden"; } } </script> <style> /* hide all images */ #img1{ visibility:hidden; } #img2{ visibility:hidden; } #img3{ visibility:hidden; } </style> <li class nav-1><a href="#" onclick="toggleHide('img1')">Hello1</a></li> <li class nav-1><a href="#" onclick="toggleHide('img2')">Hello2</a></li> <li class nav-1><a href="#" onclick="toggleHide('img3')">Hello3</a></li> <img src="images/1.jpg" id="img1" alt=""/> <img src="images/2.jpg" id="img2" alt=""/> <img src="images/3.jpg" id="img3" alt=""/>En el siguiente ejemplo, usé div en lugar de img , pero el concepto es el mismo...
Lea los comentarios para más detalles por favor:
// Get the buttons and the images let buttons = document.querySelectorAll('.btn'); let images = document.querySelectorAll('.image'); // For each button: buttons.forEach(btn => { // Onclick event: btn.addEventListener('click', () => { // Get all the images and remove the 'active' class images.forEach(image => { image.classList.remove('active'); }); // Get the id of the clicked button (which is the data-image of the target image) let target = btn.getAttribute('id'); // Add the class 'active' to the image document.querySelector(`[data-image="${target}"]`).classList.add('active'); }); }); .image { width: 100px; height: 100px; border: 1px solid; opacity: 0; transition: all 0.2s; display: none; } .image.active { opacity: 1; display: block; } <button class="btn" id="image1">Image 1</button> <button class="btn" id="image2">Image 2</button> <button class="btn" id="image3">Image 3</button> <div class="image" data-image="image1">1</div> <div class="image" data-image="image2">2</div> <div class="image" data-image="image3">3</div>