0

我真的是 jquery 的菜鸟，但我几乎不遗余力地通过阅读由 Stackoverflow 有价值的用户创建的旧帖子来解决它。我的问题是我尝试添加类 onclick 事件。它仅在我将超链接链接设置为空白（＃）时才起作用，<a href="#">test</a>但如果我将超链接状态设置为<a href="product.php"然后它会删除并添加类一段时间，并且在当前页面打开后，它会自动删除活动类并将其设置为以前的. :(我的js代码..

$('ul#menu li a').click(function() {
    $('ul#menu li a').removeClass('active');
    $(this).toggleClass('active');
});
4

4 回答 4

3

您面临的问题是加载 example.com/product.php 后，活动类不会保留在相应的锚标记中，因为加载时 javascript 不会将状态旧页面带到新页面。你可以通过两种方式做到这一点

  1. 您可以禁用页面加载并留在同一页面。

    $('ul#menu li a').click(function(e) {
    e.preventDefault();//this will stop the current event which is your page load
    $('ul#menu li a.active').removeClass('active');//this will remove the active class from only a tag having active as class
    $(this).toggleClass('active');
});

  2. 页面加载后找出您所在的页面并为相应的 a 标签设置活动类

    (function($){
     //highlight the current tab
     var l = window.location.pathname,
     str = l.slice(l.lastIndexOf('/')+1,l.length);

    $('ul#menu li a.active').removeClass('active');//remove active from home page link
    $('#menu').find('a[href="'+str+'"]').addClass('active');
})(jQuery);
于 2012-09-24T13:22:14.563 回答
2

这对我有用。

var url = window.location.href;
  url = url.substr(url.lastIndexOf("/") + 1);
  $("#menu").find("a[href='" + url + "']").addClass("active");

只需将脚本包含到每个页面，它就会添加active类以反映当前位置。无需切换任何东西。

我猜为什么您的代码不起作用：您单击一个链接，一切可能都有效，除了链接指向不同的页面并且您的 jQuery 函数被“重新加载”并且不再单击任何内容。如果您正在尝试实施一页网站，请参见例如：

于 2012-09-24T13:18:33.447 回答
0

尝试单独使用以下，并删除$('ul#menu li a').removeClass('active');

$('ul#menu li a').click(function(){
    $(this).toggleClass('active');
});
于 2012-09-24T12:36:42.373 回答
0

你应该只使用$(this).toggle('active')，你不需要前面的语句

于 2012-09-24T12:37:02.607 回答