當我使用 JS 在 html 上單擊列表時，如何顯示隱藏圖像

Question

例如，所有圖像都是隱藏的，當我單擊列表時，它應該彈出。 如果我點擊“Hello1”文本然后 image1 應該彈出

<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=""/>

Answer 1

我會將 id 添加到您的圖像並放入基本的隱藏/取消隱藏腳本：

<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=""/>

Answer 2

在下面的示例中，我使用了div而不是img ，但概念是相同的...

請閱讀評論了解更多詳情：

 // 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>