如何使我的代码一次显示一张图像？

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