当我将鼠标悬停在导航菜单中的不同链接上时,我想更改背景颜色。说,链接一..背景变为红色,导航2背景变为蓝色,导航3背景变为绿色等。但是现在,当我在这些页面上时,背景与鼠标悬停时相同链接。所以第 1 页背景将是红色,第 2 页 = 蓝色,第 3 页 = 绿色等。
5 回答
将所有链接的背景颜色信息存储在 cookie 中,当您访问其中一个页面时,获取所有 cookie 并比较当前页面的值并设置该颜色的背景。
例如,当您将鼠标悬停在 link1 上时,设置一个类似于这对字符串“link1color”:“red”等的 cookie。当您访问其中一个页面时,获取 cookie 找到页面的匹配 cookie 并获取背景颜色并更新背景。
将您的背景颜色存储在一个数组中,并根据您当前页面上的需要在 js/jquery 的帮助下从数组值相应地更改值,因为如果数组是全局定义的,那么您可以访问应用程序中的任何位置,访问速度快且低记忆。
方法 :
在你的 CSS 中拥有三个不同的类——比如 bkBlue、bkRed、bkGreen
.bkBlue { 背景颜色:“蓝色”}
使用悬停事件,使用 addClass 和 removeClass 更改应用于链接的类。
将当前类值存储在会话变量中。
将会话变量中的类添加到当前页面。
另一种方法是使用不同的 id/class 保留不同的悬停类,如果 nav 不是很多,并将这些类附加到您的特定导航悬停。我希望你能理解,因为这是最简单的方法。好运
你可以做这样的事情。
<a href="#" class="change-bg-color" data-bg-color="#ff0000">Link 1</a>
<a href="#" class="change-bg-color" data-bg-color="#00ff00">Link 2</a>
<a href="#" class="change-bg-color" data-bg-color="#0000ff">Link 3</a>
<script>
$('a.change-bg-color').hover(function(){
// Change you color
$(body).css('background-color', this.getAttribute('data-bg-color') );
},function(){
// Back to the original color
$(body).css('background-color', '#fff' ); // Supposing that #fff is your default bg color
});
</script>
如果您希望“链接 1”、“链接 2”和“链接 3”页面具有不同的背景颜色,那么最好的方法应该是使用特定于页面的 CSS 类。它不需要javascript。