0

当我单击另一个页面时，我很难弄清楚如何将 jquery addClass 函数保留在链接上。我读过我可以用 cookie 来做，但我不是 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');
});
});

任何帮助都非常感谢，谢谢！

4

2 回答 2

0

将这段代码插入到您的点击事件中

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

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

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

这应该可以解决您的问题。

于 2012-10-25T14:04:17.347 回答
0

您不一定需要 cookie 来完成此操作，有一些选项可供选择。

  1. 根据您的要求，添加一个指示当前类别的 cookie。例如，您可以使用这个jQuery 插件轻松更改 cookie。但是现在您可能会产生额外的问题，因为您必须在正确的时刻（可能在您加载产品页面时）删除此 cookie。
  2. 如果您的产品只能分配到一个类别，则您知道该类别，并且您可以在创建 HTML 时轻松添加此类（您将在服务器端执行此操作）。
  3. 您可以将查询字符串添加到您的 URL (?category=MYCATEGORY)，并基于此将类添加到您的菜单项（可能在服务器端和客户端）。
于 2012-10-25T12:33:52.940 回答