Question

我正在处理我称之为hashtag-links的内容。有了它，我试图在一个单页网站中进行深层链接，其中所有内容都被隐藏，所有内容都与javascript，jquery和php（Wordpress）挂钩。

使用window.location.hash我可以阅读部分网址并使用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){});（based on this question），但无济于事。

在这里尝试一下：
http://www.thejaneantwerp.com/#contact
然后尝试将网址中的哈希值更改为#reserveren

有人有解决方案吗？

Answer 1

请将您的代码放入一个函数中并在您需要的所有事件中调用它（在本例中为document ready和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

我认为你是自己在这里取得成功的牺牲品。 Anchor（哈希值）专门设计用于不重新加载整个页面，只是跳到锚点所在的位置。因此，如果您更改URL中的has值，它将不会重新加载页面，只需跳转到该锚点即可。

但是，在您的情况下，因为您没有将它们用作锚点，而是作为switch语句内容使用，所以当您更改锚点时它不会执行任何操作。您的JQuery函数不会再次运行，因为页面没有重新加载 - $（document）.ready在页面加载完成后只运行一次。没有重新加载 - 没有重新运行该功能。

这有意义吗？

jquery函数不适用于更改url

2 个答案: