如何使我的代碼一次顯示一張圖像？

Question

如何使我的代碼一次顯示一張圖像？

<!DOCTYPE html>
    <html lang ="en">
    <head>
    <title> VIS</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" >

    function showImage(id){
          if(document.getElementById(id).style.visibility =='visible')
             document.getElementById(id).style.visibility = 'hidden';
           else
              document.getElementById(id).style.visibility= 'visible';
        }
    </script>
    </head>
    <body>


    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Pum"/>
    <button onclick="showImage('Pum');">Pumpkins</button>
    </div>

    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Straw"/>
    <button onclick="showImage('Straw');">Strawberries</button>
    </div>

    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Ras"/>
    <button onclick="showImage('Ras');">Rasberries</button>
    </div>








    </body>

    </html>

我的代碼工作正常，但是我希望它一次顯示一個圖像，當我單擊其中一個時，它將隱藏另一個圖像。

使用我的代碼，可以顯示任意數量的圖像。 我該怎么做，我可以發送多個id作為參數嗎？

任何幫助都會很棒。

Answer 1

嘗試這樣：

首先獲取所有圖像並隱藏它們，如果要在加載時顯示任何特定內容，則忽略該索引。加載后，您可以嘗試執行按鈕操作。如果要隱藏其余可見圖像在按鈕上單擊，然后獲取可見圖像並將其隱藏並顯示單擊的圖像。

  <!DOCTYPE html> <html lang ="en"> <head> <title> VIS</title> <meta charset="utf-8"/> </head> <body> <div style="position: relative; visibility: visible;"> <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="Pumpkins" id="Pum"/> <button onclick="showImage('Pum');">Pumpkins</button> </div> <div style="position: relative; visibility: visible;"> <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="Pumpkins" id="Straw"/> <button onclick="showImage('Straw');">Strawberries</button> </div> <div style="position: relative; visibility: visible;"> <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="Pumpkins" id="Ras"/> <button onclick="showImage('Ras');">Rasberries</button> </div> </body> <script type="text/javascript" > removeVisibility(); function showImage(id){ removeVisibility(); if(document.getElementById(id).style.visibility =='hidden') document.getElementById(id).style.visibility = 'visible'; } function removeVisibility(){ var imgs=document.getElementsByTagName('img');//get all the images for(var i=0;i< imgs.length;i++){ imgs[i].style.visibility= 'hidden'; //hide them } } </script> </html>

如何使我的代碼一次顯示一張圖像？

問題描述

1 個解決方案

解決方案1
0 已采納 2015-10-18 17:11:21

如何使我的代碼一次顯示一張圖像？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-10-18 17:11:21

解決方案1
0 已采納 2015-10-18 17:11:21