用 jQuery 改变 CSS（图片）答案

【问题标题】：Changing CSS with jQuery (image)用 jQuery 改变 CSS（图片）
【发布时间】：2016-12-29 21:42:54
【问题描述】：

我知道已经有很多关于使用 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>

【问题讨论】：

标签： jquery css image

【解决方案1】：

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

$('img[Smiley Face]')

而您需要指定要选择的属性（并且大小写很重要）：

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

这是一种不常见的选择元素的方式，您最好给<img> 提供一个ID 或类并以此方式定位它。示例：

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

jQuery: $('#smiley')

无论哪种方式，这是您解决问题的 sn-p：

$("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>

【讨论】：