jQuery功能無法更改網址

Question

我正在做一些我稱為“標簽鏈接”的事情。 有了它，我正在嘗試在一個頁面網站中進行深層鏈接，該頁面中的所有內容都被隱藏，並且所有內容都與javascript，jquery和php（Wordpress）掛在一起。

使用window.location.hash我可以讀取部分url並使用switch語句，可以啟動某些函數來加載正確的先前隱藏的div 。

$(document).ready(function() {
    var hash = window.location.hash;

    switch(hash) {
        case "#faq":
            showOverlay('faq', 'menu-up');
            break;
        case "#contact":
            showOverlay('contact-submenu', 'menu-up');
            break;
        case "#reserveren":
            showOverlay('reserveren-submenu', 'menu-up');
            break;
        case "#reserverenjanenl":
            Reserveren('NL');
            break;
        case "#reserverenjaneen":
            Reserveren('EN');
            break;
        case "#reserverenurbnl":
            ReserverenURB('NL')
            break;
        case "#reserverenurben":
            ReserverenURB('EN');
            break;
        case "#reserveringsvraag":
            showOverlay('reserveringsvraag', 'menu-up');
            break;
        case "#groepsreservering":
            showOverlay('groepsreservering', 'menu-up');
            break;
    }
});

如您所見，我正在使用document ready功能。 如果您使用電子郵件中的主題標簽鏈接甚至網站其他部分的鏈接導航到網站的特定部分，則此方法正常。
問題是，如果您已經在網站上並且更改了主題標簽鏈接，那么它將不起作用。 在chrome中，一次是頁面重新加載並運行，而另一次則沒有。
在Firefox和Safari中，它根本不這樣做。

它嘗試了$(window).load(function() {}); 和$(window).on('hashchange', function(e){}); （ 基於此問題 ），但無濟於事。

在這里自己嘗試：
http://www.thejaneantwerp.com/#contact
然后嘗試將網址中的哈希值更改為#reserveren

有人有解決辦法嗎？

Answer 1

請把您的代碼放入一個函數中，並在需要的所有事件中調用它（在這種情況下，文檔准備就緒並進行hashchange）：

function switchHash() {
    var hash = window.location.hash;

    switch(hash) {
        case "#faq":
            showOverlay('faq', 'menu-up');
            break;
        case "#contact":
            showOverlay('contact-submenu', 'menu-up');
            break;
        case "#reserveren":
            showOverlay('reserveren-submenu', 'menu-up');
            break;
        case "#reserverenjanenl":
            Reserveren('NL');
            break;
        case "#reserverenjaneen":
            Reserveren('EN');
            break;
        case "#reserverenurbnl":
            ReserverenURB('NL')
            break;
        case "#reserverenurben":
            ReserverenURB('EN');
            break;
        case "#reserveringsvraag":
            showOverlay('reserveringsvraag', 'menu-up');
            break;
        case "#groepsreservering":
            showOverlay('groepsreservering', 'menu-up');
            break;
    }
  }

$(document).ready(switchHash);
$(window).on('hashchange', switchHash);

Answer 2

我認為您是您自己成功的受害者。 錨點（哈希值）經過專門設計，可以不重新加載整個頁面，而只是跳到錨點所在的位置。 因此，如果您更改URL中的has值，它將不會重新加載頁面，只需跳轉到該錨點即可。

但是，在您的情況下，因為您不是將它們用作錨，而是用作switch語句的內容，所以在更改錨時它什么都不做。 您的JQuery函數不會再次運行，因為該頁面不會重新加載-$（document）.ready在頁面加載完成后僅運行一次。 不重新加載-不重新運行該功能。

那有意義嗎？