jquery addClass和cookie

Question

我很難弄清楚當我點擊另一個頁面時如何保持鏈接上的jQuery addClass功能。我讀過我可以用cookies來做，但我不是一個JavaScript開發人員，我不能自己編寫代碼。

我有這個頁面在這裏：

http://www.nationallighting.ie/testbed/index.php/products

當我點擊左側邊欄的類別之一，內容滾動到相應類別和鏈接高亮顯示。然而，當我點擊該類別內的單品，我去到另一頁是這樣的單品頁，左側邊欄的鏈接不再突出，即：

http://www.nationallighting.ie/testbed/index.php/products-single/bmywz220

如何我還可以當我點擊單個產品頁面時，保持鏈接高亮顯示？

這裏是我很長的jQuery腳本（再次，我不是一名JavaScript開發人員，所以我盡我所能...）

// Products hover and active state 
$(function(){ 
$(".sidebar-products ul li a").click(function(){ 
$(this).addClass('active'); 
$('a.active').not(this).removeClass('active'); 
}); 
}); 
$(function(){ 
$("a.outdoor").click(function(){ 
$('.sidebar-products ul li a.outdoor').addClass('active'); 
$('a.active').not('.sidebar-products ul li a.outdoor').removeClass('active'); 
}); 
}); 
$(function(){ 
$("a.wall").click(function(){ 
$('.sidebar-products ul li a.wall').addClass('active'); 
$('a.active').not('.sidebar-products ul li a.wall').removeClass('active'); 
}); 
}); 
$(function(){ 
$("a.bathroom").click(function(){ 
$('.sidebar-products ul li a.bathroom').addClass('active'); 
$('a.active').not('.sidebar-products ul li a.bathroom').removeClass('active'); 
}); 
}); 
$(function(){ 
$("a.centre").click(function(){ 
$('.sidebar-products ul li a.centre').addClass('active'); 
$('a.active').not('.sidebar-products ul li a.centre').removeClass('active'); 
}); 
}); 
$(function(){ 
$("a.pendents").click(function(){ 
$('.sidebar-products ul li a.pendents').addClass('active'); 
$('a.active').not('.sidebar-products ul li a.pendents').removeClass('active'); 
}); 
}); 
$(function(){ 
$("a.crystal").click(function(){ 
$('.sidebar-products ul li a.crystal').addClass('active'); 
$('a.active').not('.sidebar-products ul li a.crystal').removeClass('active'); 
}); 
}); 
$(function(){ 
$("a.table").click(function(){ 
$('.sidebar-products ul li a.table').addClass('active'); 
$('a.active').not('.sidebar-products ul li a.table').removeClass('active'); 
}); 
}); 
$(function(){ 
$("a.spots").click(function(){ 
$('.sidebar-products ul li a.spots').addClass('active'); 
$('a.active').not('.sidebar-products ul li a.spots').removeClass('active'); 
}); 
}); 
$(function(){ 
$(".sidebar-about ul li a").click(function(){ 
$(this).addClass('active'); 
$('a.active').not(this).removeClass('active'); 
}); 
}); 

任何幫助非常感謝，謝謝！

Answer 1

您不一定需要cookies才能完成此操作，這裏有幾個選項。

1. 添加一個表示當前類別的cookie，如您所問。您可以使用例如this jQuery插件輕鬆更改Cookie。但是現在您可能會產生額外的問題，因爲您必須在正確的時刻刪除此Cookie（可能在您加載產品頁面時）。
2. 如果您的產品只能分配給一個類別，您就知道該類別，並且您可以在創建HTML時輕鬆添加此類（您將在服務器端執行此操作）。
3. 您可以添加一個查詢字符串到您的URL（？category = MYCATEGORY），並根據您可以添加類到您的菜單項（可能在服務器端和客戶端）。

Answer 2

插入這段代碼到你的點擊事件

$.cookie("category", 'categoryname'); 

這將您單擊菜單項，每次設置cookie，之後，你會能夠主動css類ASIGN到合適項目。我注意到，所有的鏈接都已經指定類，因此，如果您選擇使用相同的名稱爲您的cookie，你就可以做這樣的事情

$(document).ready(function() { 
    $('a.'+$.cookie("category")).addClass('activeclass') 
} 

這應該可以解決您的問題。