当我将鼠标悬停在导航菜单中的不同链接上时,我想更改背景颜色。比如,链接一。。背景变为红色,导航2背景变为蓝色,导航3背景变为绿色等。但现在,当我在这些页面上时,背景与鼠标悬停在链接上时相同。因此,第1页背景为红色,第2页为蓝色,第3页为绿色等。
将所有链接的背景颜色信息存储在cookie中,当您访问其中一个页面时,获取所有cookie并比较它们在当前页面的值,然后设置该颜色的背景。
例如,当您将鼠标悬停在link1上时,设置一个类似于这对字符串"link1color":"red"的cookie,依此类推。当您访问其中一个页面时,获取cookie,找到该页面的匹配cookie,获取背景色并更新背景。
您可以这样做。
<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"one_answers"链接3"页面有不同的背景色,最好的方法应该是有一个特定于页面的CSS类。它不需要javascript。
将您的背景色存储在一个数组中,并根据您当前页面上的需要,借助js/jquery从数组值中相应地更改值。因为如果数组是全局定义的,那么您可以快速访问应用程序中的任何位置,并降低内存。
方法:
-
在你的CSS中有三个不同的类,比如bkBlue,bkRed,bkGreen
.bk蓝色{背景颜色:"蓝色"}
-
使用悬停事件,使用addClass和removeClass更改应用于链接的类。
-
将当前类值存储在会话变量中。
-
将会话变量中的类添加到当前页面。
另一种方法是,如果nav数量不多,则保留具有不同id/class的不同悬停类,并将这些类与特定的nav悬停附加在一起。我希望你能理解,因为这是最简单的方法。好运