Changing CSS with jQuery (image)

Question

I know that there are already a lot of posts about changing CSS with jQuery but I can't see my fault, I want that the image is hidden from the beginning and when you click a tab of the menu that the image shows up. Thank you! ;)

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>

Jon Uleis · Accepted Answer · 2016-12-29 21:45:07Z

Your jQuery selector was incorrect. You had:

$('img[Smiley Face]')

Whereas you need to specify the attribute you want to select (and case matters):

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

This is an uncommon way to select an element, and you'd be better off giving the <img> an ID or class and targeting it that way. Example:

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

jQuery: $('#smiley')

Either way, here's your snippet with the issue resolved:

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

Collectives™ on Stack Overflow

Changing CSS with jQuery (image)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related