Jquery更改導航鏈接上的背景顏色mouseover

我想在我的導航菜單中將鼠標懸停在不同鏈接上時更改背景顏色。說，鏈接一個..背景去紅色，導航2背景去藍色，導航3背景去綠色等。但現在，當我在這些頁面上，背景與當鼠標懸停在鏈接。所以頁面1的背景將是紅色的，頁面2 =藍色，頁面3 =綠色等。Jquery更改導航鏈接上的背景顏色mouseover

來源

2013-08-23 Declan Castle-Edmonstone

你試過了什麼？ –

你可以做這樣的事情。

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

來源

2013-08-23 05:41:15

存儲cookies中所有鏈接的背景顏色信息，當您訪問其中一個頁面時，獲取所有cookie併爲您當前頁面比較它們的值並設置該顏色的背景。

例如，當您將鼠標懸停在link1上時，設置一個類似於這對字符串「link1color」：「red」等的cookie。當您訪問這些頁面之一時，可以找到頁面的匹配cookie並獲取背景色並更新背景。

來源

2013-08-23 05:42:07

非常感謝我會嘗試這樣的事情，我從來沒有使用餅乾，所以這將是很好的嘗試。 –

這是一些艱難的方法，你可以使用更簡單的js方法然後這個。 – Anup

將您的背景顏色存儲在一個數組中，並根據您當前頁面上的需要，根據您對當前頁面的需求，從數組值中相應地更改數值。因爲如果array是全局定義的，那麼您可以訪問應用程序中的任何位置快速訪問和低內存。

來源

2013-08-23 05:44:25 Anup

該數組在導航不同頁面時不會持續。 –

請再次閱讀我的完整答案.....我多次使用兄弟 – Anup

所以你建議用變量「污染」全球環境？ –

方法：

在有你的CSS三種不同級別的 - 說bkBlue，bkRed，bkGreen

.bkBlue { 背景色： '藍色' }
使用懸停事件，使用addClass和removeClass更改應用於鏈接的類。
將當前類的值存儲在會話變量中。
將會話變量中的類添加到當前頁面。

來源

2013-08-23 05:45:48 Vandesh

另一種方法是用不同的id/class保持不同的懸浮類，如果nav不是大數目並且將這些類附加到特定的導航懸停中。我希望你明白，因爲這是最簡單的方法。 GUD運氣

來源

2013-08-23 05:57:05 Anup

Jquery更改導航鏈接上的背景顏色mouseover

回答

相關問題