我知道已经有很多关于使用 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 选择器不正确。你有:
$('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>
关于jquery - 使用 jQuery 更改 CSS(图片),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41387597/