我如何让我的代码一次显示一张图片？

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>

我的代码工作正常，但我希望它在 time.When 处显示一张图片我单击其中一张，它会隐藏另一张。

用我的代码，可以显示任意多的图像，也可以显示尽可能少的图像。我该怎么做，我可以发送多个 id 作为参数吗？

任何帮助都会很棒。

Answer 1

这样试试：

首先获取所有图像并隐藏它们，如果您希望在加载时显示任何特定内容，请忽略 index.after 加载，您可以在尝试时执行按钮操作 to.If想要在单击按钮时隐藏其余的可见图像，然后只需获取可见图像并隐藏它并显示单击的图像。

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

我如何让我的代码一次显示一张图片？

How would I make my code show one image at time?

javascript

show-hide