加載新頁面后，如何更改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.