加载新页面后，如何更改div背景颜色并使其高亮？
[英]How to change a div background colour and keep it highlighed once the new page is loaded?
问题描述
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.." 
希望您能对我有所帮助。我正在尝试使div保持在当前菜单顶部的div上，即sama，如此网站上的“问题，标记用户”。
Here is my site: http://www.ehivemarketing.com/web-design.php 这是我的网站： 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: 这是我的悬停CSS：
.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 个解决方案
解决方案1
1 2012-10-29 11:25:34
解决方案2
0 2012-10-29 11:14:17
You can create a class, let's say active , that is the same as :hover like this: 您可以创建一个类，例如active ，它与:hover一样，如下所示：
.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. 而不是使用PHP进行检查（就像使用PHP一样），请选择哪个页面并将活动类添加到导航中的此链接。 Could look like this: 可能看起来像这样：
<div class="each_text_menu<php print ( 'career' == $page ? ' active' : '' ); ?>">
<a href="../careers.php" >Careers</a>
</div>
解决方案3
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. 一种简单的方法是在每个页面的body标签上添加相关的类，然后您就可以对其进行引用。
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: 因此，您的CSS将是：
body.nav1-on ul#nav li#nav1 {
// some css styles
}
解决方案4
0 2012-10-29 11:14:54
Define an additional css class defined like this: 定义一个附加的CSS类，如下所示：
.active
{
background-color:#aad400;
}
The on the code that generates the menu, add the class to the corresponding div. 在生成菜单的代码上，将类添加到相应的div。
解决方案5
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. 我看到两种解决方法，第一种是在php中执行逻辑-检查您所处的页面并回显并将类添加到正确的项目。 Im a bit rusty when it comes to php so there might be errors in the syntax 我对PHP有点生疏，所以语法可能有错误
<div class="each_circle_menu <? if($page == 'web-design') { echo "greenBG"; } ?>">
Or you could also use javascript/jquery to do the thing for you 或者您也可以使用javascript / jquery为您做事情
$(document).ready( function() {
$('.each_circle_menu').each(function() {
var item = $(this);
if(window.location.indexOf(item.attr('href')) != -1) {
item.addClass('greenBG');
}
});
});
解决方案6
0 2012-11-01 17:27:45
Use an .active class. 使用.active类。
.each_text_menu1:hover
{
background-color:#aad400;
}
.each_text_menu:hover
{
background-color:#aad400;
}
.active{background-color:#aad400;}
The HTML: 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.