0

我在我的网站上设置了一个 hashchange 函数，它允许我在“关于”页面上的 6 个不同部分之间切换，这很好用，它将哈希附加到每个部分没有问题。
我遇到的问题是，当您从另一个页面链接到这些哈希时，它们无法加载相关内容，例如：www.thisisawebsite.com/about/#section03
当您在 about 页面上时，哈希工作正常，但来自其他任何地方它只加载section01。

jQuery(document).ready(function(){
jQuery('.about').hide();
jQuery('#section01').show();

jQuery(function(){
jQuery(window).on('hashchange', function(){
        var hash = window.location.hash;
     jQuery('.sub-menu').each(function(){
           jQuery('.about').hide();
         if (jQuery(this).attr('hook') === hash.replace('#section', '')) {
           jQuery('#section'+jQuery(this).attr('hook')).fadeIn();
           return false;
         }
    });  

});
});
jQuery(window).trigger('hashchange');
});

这可以解决吗，因为我想要使用 hashchange 函数的整个想法是这样我不必有 6 个单独的页面，我可以在一个页面上显示/隐藏每个部分并使用哈希链接到它们。

4

1 回答 1

1

如果您加载已经存在哈希标签的页面，窗口上的 hashchange 事件是否会触发？如果它不存在您的问题，我建议将每个循环重构为一个单独的函数，然后在文档准备好时调用它以查看是否存在任何哈希标签，然后淡入内容。

像这样的东西（我没有尝试过，因为我没有你的 DOM，但你会明白的。

jQuery(document).ready(function(){

    jQuery(window).on('hashchange', function(){
        var hashFound = determineContent();
        if(hashFound) return false;
    });

    function determineContent(){

        var hash = window.location.hash;
        jQuery('.about').hide();

        jQuery('.sub-menu').each(function(){

             if (jQuery(this).attr('hook') === hash.replace('#section', '')) {
               jQuery('#section'+jQuery(this).attr('hook')).fadeIn();
                 return true;
             }
        });

        // no hash found, so let's show #section01
        jQuery('#section01').show();

        return false;
    }

    determineContent();
});

如果这不起作用，那么有一个很棒的 jQuery 插件，它也可以处理 ajax 事件。我一直在将它用于基于 js 的 Web 应用程序。

http://www.asual.com/jquery/address/

于 2013-02-20T09:45:12.187 回答