Jquery在导航链接鼠标悬停时更改背景颜色答案

【问题标题】：Jquery Change background colour on Nav link mouseoverJquery在导航链接鼠标悬停时更改背景颜色
【发布时间】：2013-08-23 05:35:14
【问题描述】：

当我将鼠标悬停在导航菜单中的不同链接上时，我想更改背景颜色。说，链接一..背景变为红色，导航2背景变为蓝色，导航3背景变为绿色等。但是现在，当我在这些页面上时，背景与鼠标悬停时相同链接。所以第 1 页的背景将是红色，第 2 页 = 蓝色，第 3 页 = 绿色等等。

【问题讨论】：

标签： javascript jquery css background mouseover

【解决方案1】：

将所有链接的背景颜色信息存储在 cookie 中，当您访问其中一个页面时，获取所有 cookie 并比较当前页面的值并设置该颜色的背景。

例如，当您将鼠标悬停在 link1 上时，设置一个类似于这对字符串“link1color”：“red”等的 cookie。当您访问其中一个页面时，获取 cookie 找到该页面的匹配 cookie 并获取 background-color 并更新背景。

【讨论】：

非常感谢，我会尝试这样的，我以前从未使用过 cookie，所以尝试一下会很好。
这个方法很难，你可以用更简单的js方法然后这个。

【解决方案2】：

你可以这样做。

<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。

【讨论】：

【解决方案3】：

将您的背景颜色存储在一个数组中，并在 js/jquery 的帮助下根据您当前页面上的需要从数组值相应地更改值，因为如果数组是全局定义的，那么您可以快速访问应用程序中的任何位置访问和内存不足。

【讨论】：

数组不会在不同页面的导航中持续存在。
所以你是建议pollute带变量的全局环境？
对于全局定义，您可以在一个 js 文件中创建它，然后将其附加到 index.html 标题部分。或者如果值小于一个小数组，你可以放在索引文件中
不要将所有变量值保存在数组中，这里的链接只需将变量名放在索引值的位置，例如：w3schools.com/js/js_obj_array.asp
你确定这行得通吗？全局定义变量并不意味着即使在同一个应用程序中，您也可以从不同页面访问同一个变量。

【解决方案4】：

方法：

在你的 CSS 中包含三个不同的类 - 比如 bkBlue、bkRed、bkGreen

.bkBlue { 背景颜色：“蓝色” }
使用悬停事件，使用 addClass 和 removeClass 更改应用于链接的类。
将当前类值存储在会话变量中。
将会话变量中的类添加到当前页面。

【讨论】：

【解决方案5】：

如果导航数量不多，另一种方法是使用不同的 id/class 保留不同的悬停类，并将该类与您的特定导航悬停附加。我希望你能理解，因为这是最简单的方法。祝你好运

【讨论】：