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

您不一定需要cookie才能实现这一目标，有一些选择。

按照您的要求添加指示当前类别的Cookie。您可以使用例如this jQuery插件轻松更改Cookie。但是现在您可能会产生额外的问题，因为您必须在正确的时刻删除此cookie（可能是在您加载产品页面时）。
如果您的产品只能分配到一个类别，则您知道该类别，并且您可以在创建HTML时轻松添加此类（您将在服务器端执行此操作）。
您可以在URL中添加查询字符串（？category = MYCATEGORY），并根据该字符串将类添加到菜单项（可在服务器端和客户端）。

Answer 2

将此段代码插入点击事件

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

每次单击菜单项时都会设置cookie，之后您就可以将活动的css类与相应的项目对齐。我注意到你的所有链接都已经指定了类，所以如果你选择为你的cookie使用相同的名字，你将可以做这样的事情

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

这可以解决您的问题。

jquery addClass和cookie

2 个答案: