highlight a div linked to the current page - html

Question

I'd like the buttons (moon, planets, etc...) staying red when we are on the current page.
Link to my site: http://www.chooseyourtelescope.com/moon-telescope/
Here, the "moon" button should be red.
Here is the code:
HTML
<div class="top-logos"><img src="" alt="LUNE"></div>
<div class="top-logos"><img src="" alt="PLANETES"></div>
<div class="top-logos"><img src="" alt="CIEL PROFOND"></div>
<div class="top-logos"><img src="" alt="SOLEIL"></div>
<div class="top-logos"><img src="" alt="TELESCOPE POLYVALENT"></div>
CSS
.top-logos {
width:20%;
top:108px;
padding:5px;
position: relative;
text-align:center;
float: left;
background:#0e0e18
}
.top-logos:hover {
background:#dd0000;
}
.top-logos:active {
background:#dd0000;
}
I don't know anything about Javascript but I can use it if you tell me what to do. Also I've JQuery installed.

Answer 1

You already have the class current-logo on the appropriate element. Just style that:
.current-logo div.top-logos {
background-color: #dd0000;
}

Answer 2

It looks like you already have this set up on your site with the .current-logo class on the anchor tags.
In your CSS file, all you need to do is
.current-logo div {
background-color: #dd0000;
}
You need to make sure that the .current-logo class changes based on what page you are on.
It looks like you're using Wordpress so the best way to do it would be to use the built-in menu functionality. You need a register your menu in functions.php and it will automatically update based on the pages you have for your site. You can read about that here.
Per your comment about it being in a file called base.php, you could do something like this in base.php:
<a href=".../moon-telescope/" <?php if (is_page('moon-telescope')): echo 'class="current-logo"'; endif; ?> >
<div></div>
</a>
<a href=".../planets/" <?php if (is_page('planets')): echo 'class="current-logo"'; endif; ?> >
<div></div>
</a>
Change to match your pages.