在jquery中突出显示当前页面

我有12个html页面。 点击左侧导航栏链接时会加载所有这些页面。 在这里，我需要在当前链接中添加一个类，单击并加载页面。 我试过这个：

$(function(){ $('#container li a').click(function(){ $('#container li a').removeClass('current'); var pathname = (window.location.pathname.match(/[^\/]+$/)[0]); var currentPage = $(this).attr('href'); if(currentPage==pathname){ $(this).addClass('current'); } else{ alert('wrong'); } // alert(pathname+' currentPage: '+currentPage); }) }) 

它工作，但在页面加载，类被删除，我不知道为什么它发生..

任何帮助？

Answer 1

吉米是对的。 当您重新加载页面时，浏览器还会刷新Javascript代码，这意味着您所做的所有变量和设置也将被重置。 这就是为什么单击链接时该类似乎被删除的原因。

这里的解决方案是修改您的代码以遍历所有链接，并将每个链接与当前页面的URL进行比较。 找到匹配项后，请调用该链接的addClass函数以更改其颜色。 所以，这样的事情应该有效：

 $(function(){ var pathname = (window.location.pathname.match(/[^\/]+$/)[0]); $('#container ul li a').each(function() { if ($(this).attr('href') == pathname) { $(this).addClass('current'); } }); }); 

请注意，我们在页面加载时调用此循环函数，而不是在用户单击链接时调用它…因为单击链接将导致页面重新加载，这将重置所有JQuery变量。

希望这可以帮助。

Answer 2

使用jQuery，我总是认为最好使用jQuery选择器来过滤你想要影响的元素，而不是自己循环遍历它们。 这是我的解决方案：

 $(document).ready( function () { var pathname = (window.location.pathname.match(/[^\/]+$/)[0]); $("#container li a").removeClass("current"); $("#container li a[href='" + pathname + "']").addClass("current"); }); 

Answer 3

JavaScript是浏览器中的客户端语言，因此您对页面所做的任何更改都将持续到窗口关闭或加载新页面为止。 您正在尝试的内容应该在服务器端完成。 如果您坚持使用JavaScript或者服务器端语言不可用，则需要在页面加载时突出显示当前页面的导航链接，而不是响应单击其中一个链接。