How to change a div background colour and keep it highlighed once the new page is loaded?
Question
Hope you can help me..Im trying to keep highlighed the div on the top menu in which im currently on, sama as on this website "questions, tags users.."
Here is my site: http://www.ehivemarketing.com/web-design.php
so basicaly the top menu is an include in which is just that:
<div class="each_circle_menu"><a href="web-design.php" class="topLink"><img src="images/bt_top_webdesign.png" border="0"/></a></div>
<div class="each_circle_menu"><a href="online-marketing.php" class="topLink"><img src="images/bt_top_online_marketing.png" border="0" /></a></div>
<div class="each_circle_menu"><a href="social-media.php" class="topLink"><img src="images/bt_top_social_media.png" border="0"/></a></div>
<div class="each_circle_menu"><a href="#" class="topLink"><img src="images/bt_top_learningcentre.png" border="0" /></a></div>
<div class="each_text_menu1"><a href="../index.html" >Home</a></div>
<div class="each_text_menu"><a href="../about-ehive-digital.php" >About Us</a></div>
<div class="each_text_menu"><a href="../contact-us.php" >Contact Us</a></div>
<div class="each_text_menu"><a href="../careers.php" >Careers</a></div>
<div class="each_text_menu">Clients</div>
this is my CSS for the Hover:
.each_text_menu1:hover
{
background-color:#aad400;
}
.each_text_menu:hover
{
background-color:#aad400;
}
in which works fine but I need to keep the color background once it is clicked.
Any thoughts of how I could inplement this?
6 answers
solution1
1 2012-10-29 11:25:34
solution2
0 2012-10-29 11:14:17
You can create a class, let's say active , that is the same as :hover like this:
.each_text_menu:hover, .each_text_menu.active {
background-color:#aad400;
}
And than check with PHP - as you're using PHP - which page is select and add the active class to this link in the navigation. Could look like this:
<div class="each_text_menu<php print ( 'career' == $page ? ' active' : '' ); ?>">
<a href="../careers.php" >Careers</a>
</div>
solution3
0 2012-10-29 11:14:29
There are many ways you can do this. One simple way to do it is by adding a relevant class to the body tag on each page which you can then reference.
So say your navigation is like this:
<ul id="nav">
<li id="nav1"><a href="#">Nav #1</a></li>
<li id="nav2"><a href="#">Nav #2</a></li>
<li id="nav3"><a href="#">Nav #3</a></li>
<li id="nav4"><a href="#">Nav #4</a></li>
</ul>
Your body tag on the homepage would be something like this:
<body class="nav1-on">
So your css would be:
body.nav1-on ul#nav li#nav1 {
// some css styles
}
solution4
0 2012-10-29 11:14:54
Define an additional css class defined like this:
.active
{
background-color:#aad400;
}
The on the code that generates the menu, add the class to the corresponding div.
solution5
0 2012-10-29 11:20:15
I see two ways how to approach this, first is to do the logic in php - check whatever page you're on and echo and add the class to the correct item. Im a bit rusty when it comes to php so there might be errors in the syntax
<div class="each_circle_menu <? if($page == 'web-design') { echo "greenBG"; } ?>">
Or you could also use javascript/jquery to do the thing for you
$(document).ready( function() {
$('.each_circle_menu').each(function() {
var item = $(this);
if(window.location.indexOf(item.attr('href')) != -1) {
item.addClass('greenBG');
}
});
});
solution6
0 2012-11-01 17:27:45
Use an .active class.
.each_text_menu1:hover
{
background-color:#aad400;
}
.each_text_menu:hover
{
background-color:#aad400;
}
.active{background-color:#aad400;}
The HTML:
<div class="each_circle_menu"><a href="web-design.php" class="topLink"><img src="images/bt_top_webdesign.png" border="0"/></a></div>
<div class="each_circle_menu"><a href="online-marketing.php" class="topLink"><img src="images/bt_top_online_marketing.png" border="0" /></a></div>
<div class="each_circle_menu"><a href="social-media.php" class="topLink"><img src="images/bt_top_social_media.png" border="0"/></a></div>
<div class="each_circle_menu"><a href="#" class="topLink"><img src="images/bt_top_learningcentre.png" border="0" /></a></div>
<div class="each_text_menu1"><a href="../index.html" >Home</a></div>
<div class="each_text_menu"><a href="../about-ehive-digital.php" >About Us</a></div>
<div class="each_text_menu"><a href="../contact-us.php" >Contact Us</a></div>
<div class="each_text_menu"><a href="../careers.php" >Careers</a></div>
<div class="each_text_menu active">Clients</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.