html - highlight a div linked to the current page -
i'd buttons (moon, planets, etc...) staying red when on current page.
link site: http://www.chooseyourtelescope.com/moon-telescope/ here, "moon" button should red.
here code:
html
<a href=""><div class="top-logos"><img src="" alt="lune"></div></a> <a href=""><div class="top-logos"><img src="" alt="planetes"></div></a> <a href=""><div class="top-logos"><img src="" alt="ciel profond"></div></a> <a href=""><div class="top-logos"><img src="" alt="soleil"></div></a> <a href=""><div class="top-logos"><img src="" alt="telescope polyvalent"></div></a>
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 javascript can use if tell me do. i've jquery installed.
it looks have set on site .current-logo
class on anchor tags.
in css file, need is
.current-logo div { background-color: #dd0000; }
you need make sure .current-logo
class changes based on page on.
it looks you're using wordpress best way use built-in menu functionality. need register menu in functions.php , automatically update based on pages have site. can read here.
per comment being in file called base.php, 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 match pages.
Comments
Post a Comment