在jquery中突出显示当前页面答案

【问题标题】：Highlight current page in jquery在jquery中突出显示当前页面
【发布时间】：2010-06-02 18:09:14
【问题描述】：

我有 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);

    })
})

它可以工作，但是在页面加载时，该类被删除，我不知道为什么会这样..

有什么帮助吗？

【问题讨论】：

标签： javascript jquery regex

【解决方案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 变量。

希望这会有所帮助。

【讨论】：

【解决方案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");
});

【讨论】：

【解决方案3】：

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

【讨论】：