加载新页面后，如何更改div背景颜色并使其高亮？
[英]How to change a div background colour and keep it highlighed once the new page is loaded?
问题描述
希望您能对我有所帮助。我正在尝试使div保持在当前菜单顶部的div上，即sama，如此网站上的“问题，标记用户”。
这是我的网站： http : //www.ehivemarketing.com/web-design.php
因此，基本上，顶层菜单包含以下内容：
<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>
这是我的悬停CSS：
.each_text_menu1:hover
{
background-color:#aad400;
}
.each_text_menu:hover
{
background-color:#aad400;
}
在其中工作正常，但单击后我需要保留颜色背景。
关于如何补充这一点的任何想法？
6 个解决方案
解决方案2
0 2012-10-29 11:14:17
您可以创建一个类，例如active ，它与:hover一样，如下所示：
.each_text_menu:hover, .each_text_menu.active {
background-color:#aad400;
}
而不是使用PHP进行检查（就像使用PHP一样），请选择哪个页面并将活动类添加到导航中的此链接。 可能看起来像这样：
<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
您可以通过多种方式执行此操作。 一种简单的方法是在每个页面的body标签上添加相关的类，然后您就可以对其进行引用。
所以说您的导航是这样的：
<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>
您在首页上的身体标签将如下所示：
<body class="nav1-on">
因此，您的CSS将是：
body.nav1-on ul#nav li#nav1 {
// some css styles
}
解决方案4
0 2012-10-29 11:14:54
定义一个附加的CSS类，如下所示：
.active
{
background-color:#aad400;
}
在生成菜单的代码上，将类添加到相应的div。
解决方案5
0 2012-10-29 11:20:15
我看到两种解决方法，第一种是在php中执行逻辑-检查您所处的页面并回显并将类添加到正确的项目。 我对PHP有点生疏，所以语法可能有错误
<div class="each_circle_menu <? if($page == 'web-design') { echo "greenBG"; } ?>">
或者您也可以使用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
使用.active类。
.each_text_menu1:hover
{
background-color:#aad400;
}
.each_text_menu:hover
{
background-color:#aad400;
}
.active{background-color:#aad400;}
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>
单击第一页的链接后如何更改第二页div的背景颜色
[英]How to change the background color of a div on 2nd page once the link from 1st page is clicked
每次加载网页时，如何使用JavaScript用新图像更改背景？
[英]How to change background with a new image using JavaScript when each time the web page is loaded?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.