2015-10-18 2 views
0

Как бы мне сделать мой код показом одного изображения?Как я могу сделать свой код показом одного изображения?

<!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 я нажимаю одну из них, она будет скрывать другой.

С помощью моего кода можно отобразить столько изображений, сколько захотите, и всего несколько изображений. Как я могу это сделать, могу ли я отправить несколько идентификаторов в качестве параметров?

Любая помощь будет отличной.

+0

http://stackoverflow.com/questions/6641136/what-is-the-best-way-to-implement-multiway-toggle-using-javascript-jquery –

+0

Вы могли бы также сделать все изображения невидимыми, а затем показать только тот, который вы нажали. –

+0

@ Suchit Спасибо, но это не сработало для меня. – user3251123

ответ

0

Попробуйте так:

Сначала получите все изображения и скрыть их, если вы хотите какой-либо конкретной для показа во время загрузки просто игнорировать эту index.after нагрузку вы можете сделать вашу кнопку действия, как вы пытаетесь . Если вы хотите скрыть оставшиеся видимые изображения при нажатии кнопки, просто получите видимое изображение и спрячьте его и покажите щелчок.

 <!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++){ 
 
      \t imgs[i].style.visibility= 'hidden'; //hide them 
 
       } 
 
          } 
 
       </script> 
 
       </html>

+0

Ответ, который имеет нулевое объяснение, всегда можно улучшить, объяснив, что вы сделали, и не заставляя читателя делать визуальный разброс, чтобы найти то, что представляет собой настоящая рекомендация. Пожалуйста, добавьте соответствующее объяснение тому, что вы изменили и почему. – jfriend00

+0

@ jfriend00 ji как вы говорите. –

+0

Ну, я попробовал поставить оператор if/if else. Если это спрятано, то его должно быть видно. – user3251123