скрыть / показать изображение в jquery

Question

Как показать / скрыть изображение при нажатии на гиперссылку?

<script>
function getresource(id)
{
    if(id==4)
    {
       //show image
     }
    else if(id==5)
    {
         //hide image
     }

 } 
</script>
<a href="#" onclick="javascript:getresource('4');">Bandwidth</a>
<a href="#" onclick="javascript:getresource('5');">Upload</a>
<p align="center"> 
  <img id="img3" src="/media/img/close.png" style="visibility: hidden;" />
  <img id="img4" src="/media/img/close.png" style="visibility: hidden;" />
</p>

Answer 1

Какое изображение вы хотите скрыть?Предполагая, что все изображения должны работать:

$("img").hide();

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

Однако яНастоятельно рекомендую прочитать документацию Jquery, вы могли бы это выяснить сами: http://docs.jquery.com/Main_Page

Answer 2

С именем класса изображения:

$('.img_class').hide(); // to hide image
$('.img_class').show(); // to show image

С идентификатором изображения:

$('#img_id').hide(); // to hide image
$('#img_id').show(); // to show image

Answer 3

Используйте .css() jQuery манипуляторы или, что еще лучше, просто наберите .show() / .hide() на изображении, как только вы получите к нему дескриптор (например, $('#img' + id)).

Кстати, вы не должны писать обработчики javascript с префиксом "javascript:".

Answer 4

<script>
function show_image(id)
{
    if(id =='band')
    {
       $("#upload").hide();
       $("#bandwith").show();
    }
    else if(id =='up')
    {
        $("#upload").show();
        $("#bandwith").hide();
    }
} 
</script>

<a href="#" onclick="javascript:show_image('bandwidth');">Bandwidth</a>
<a href="#" onclick="javascript:show_image('upload');">Upload</a>

<img src="img/im.png" id="band" style="visibility: hidden;" />
<img src="img/im1.png" id="up" style="visibility: hidden;" />

Answer 5

Я знаю, что это старый пост, но он может быть полезен для тех, кто хочет показать изображение на стороне сервера .NET с помощью jQuery.

Вы должны использовать немного другую логику.

Итак, $ ("# <% = myServerimg.ClientID%>"). Show () не будет работать, если вы спрятали изображение, используя myServerimg.visible = false.

Вместо этого используйте на стороне сервера следующее:

myServerimg.Style.Add("display", "none")

Answer 6

Я должен был сделать что-то подобное только сейчас. Я закончил делать:

function newWaitImg(id) {
    var img = {
       "id" : id,
       "state" : "on",
       "hide" : function () {
           $(this.id).hide();
           this.state = "off";
       },
       "show" : function () {
           $(this.id).show();
           this.state = "on";
       },
       "toggle" : function () {
           if (this.state == "on") {
               this.hide();
           } else {
               this.show();
           }
       }
    };
};

.
.
.

var waitImg = newWaitImg("#myImg");
.
.
.
waitImg.hide(); / waitImg.show(); / waitImg.toggle();

Answer 7

Если вы пытаетесь скрыть загрузку img и показывать пропускную способность img при нажатии полосы пропускания и наоборот, это будет работать

<script>

    function show_img(id)
    {
        if(id=='bandwidth')
        {
           $("#upload").hide();
           $("#bandwith").show();
        }
        else if(id=='upload')
        {
            $("#upload").show();
            $("#bandwith").hide();
        }
    return false;
     } 
    </script>
    <a href="#" onclick="javascript:show_img('bandwidth');">Bandwidth</a>
    <a href="#" onclick="javascript:show_img('upload');">Upload</a>
    <p align="center"> 
      <img src="/media/img/close.png" style="visibility: hidden;" id="bandwidth"/>
      <img src="/media/img/close.png" style="visibility: hidden;" id="upload"/>
    </p>