在 jquery 中突出显示当前页面

IT技术 javascript jquery regex
2021-03-20 08:49:23

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

    })
})

它有效，但在页面加载时，该类被删除，我不知道为什么会这样..

有什么帮助吗？

3个回答

吉米是对的。当您重新加载页面时，浏览器也会刷新 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 变量。

希望这可以帮助。

对于 jQuery，我始终认为最好使用 jQuery 选择器来过滤您希望影响的元素，而不是您自己循环遍历它们。这是我的解决方案：

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

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

其它你可能感兴趣的问题
上一篇动态插入的 <script> 标签是否有效？ 下一篇chrome 扩展是否在内部使用 JSON.stimingify 将消息发送到后台页面？