While there are numerous resources on changing CSS with jQuery, I seem to be having trouble getting my image to hide initially and show up when a menu tab is clicked. Any help would be greatly appreciated! ;)
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>