在jquery中突出顯示當前頁面

Question

我有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或者服務器端語言不可用，則需要在頁面加載時突出顯示當前頁面的導航鏈接，而不是響應單擊其中一個鏈接。