hide/show a image in jquery

前端 未结 7 1428
逝去的感伤
逝去的感伤 2021-02-14 16:57

How to show/hide the image on clicking the hyperlink?



        
相关标签:
7条回答
  • 2021-02-14 17:36

    With image class name:

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

    With image Id :

    $('#img_id').hide(); // to hide image
    $('#img_id').show(); // to show image
    
    0 讨论(0)
  • 2021-02-14 17:39

    If you're trying to hide upload img and show bandwidth img on bandwidth click and viceversa this would work

    <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>
    
    0 讨论(0)
  • 2021-02-14 17:47

    What image do you want to hide? Assuming all images, the following should work:

    $("img").hide();
    

    Otherwise, using selectors, you could find all images that are child elements of the containing div, and hide those.

    However, i strongly recommend you read the Jquery docs, you could have figured it out yourself: http://docs.jquery.com/Main_Page

    0 讨论(0)
  • 2021-02-14 17:48

    I had to do something like this just now. I ended up doing:

    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();
    
    0 讨论(0)
  • 2021-02-14 17:49

    Use the .css() jQuery manipulators, or better yet just call .show()/.hide() on the image once you've obtained a handle to it (e.g. $('#img' + id)).

    BTW, you should not write javascript handlers with the "javascript:" prefix.

    0 讨论(0)
  • 2021-02-14 17:51

    I know this is an older post but it may be useful for those who are looking to show a .NET server side image using jQuery.

    You have to use a slightly different logic.

    So, $("#<%=myServerimg.ClientID%>").show() will not work if you hid the image using myServerimg.visible = false.

    Instead, use the following on server side:

    myServerimg.Style.Add("display", "none")
    
    0 讨论(0)
提交回复
热议问题