使用jQuery更改CSS（图片）

Question

我知道已经有很多关于使用jQuery更改CSS的文章，但是我看不到我的错，我希望图像从一开始就隐藏起来，并且当您单击显示图像的菜单选项卡时。 谢谢！ ;）

 h1 { text-align: center; } .Menu { width: 550px; height: 18px; text-align: center; margin: 0 auto; } li { width: 100px; float: left; padding: 10px; display: block; background-color: green; margin: 0 auto; text-align: center; height: 18px; } ul { list-style-type: none; margin: 0 auto; } li:hover { color: cyan; background-color: pink; cursor: pointer; } body { background-color: cyan; } .image { text-align: center; } img { border: 4px solid black; border-radius: 25px; visibility: hidden; } 

 <h1> 29/12/'2016 </h1> <div class="Menu"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <br></br> <div class="image"> <img src="https://www.google.be/images/branding/googleg/1x/googleg_standard_color_128dp.png" width= 200px alt="Smiley face"/> </div> <script> $("document").ready(function(){ $("li").on("click",function(){ $('img[Smiley Face]').css("visibility","visible"); }); }); </script> 

Answer 1

您的jQuery选择器不正确。 你有过：

$('img[Smiley Face]')

而您需要指定要选择的属性（和大小写有关）：

$('img[alt="Smiley face"]')

这是一种不常见的选择元素的方法，最好给<img>一个ID或类并以此为目标。 例：

HTML: <img id="smiley" src="image.jpg" />

jQuery: $('#smiley')

无论哪种方式，这都是您的代码段，已解决了该问题：

 $("document").ready(function() { $("li").on("click", function() { $('img[alt="Smiley face"]').css("visibility", "visible"); }); }); 

 h1 { text-align: center; } .Menu { width: 550px; height: 18px; text-align: center; margin: 0 auto; } li { width: 100px; float: left; padding: 10px; display: block; background-color: green; margin: 0 auto; text-align: center; height: 18px; } ul { list-style-type: none; margin: 0 auto; } li:hover { color: cyan; background-color: pink; cursor: pointer; } body { background-color: cyan; } .image { text-align: center; } img { border: 4px solid black; border-radius: 25px; visibility: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1> 29/12/'2016 </h1> <div class="Menu"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <br><br> <div class="image"> <img src="https://www.google.be/images/branding/googleg/1x/googleg_standard_color_128dp.png" width=200px alt="Smiley face" /> </div>