jQuery:hashchange函数问题

Question

我在我的网站上设置了一个hashchange函数，它允许我在"about"页面上的6个不同部分之间切换，这很好，它将哈希附加到每个部分，没有问题
不过，我遇到的问题是，当你从另一个页面链接到这些哈希时，它们无法加载相关内容，例如：www.thiisawebsite.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个单独的页面，我只需要在一个页面上显示/隐藏每个部分，然后用hash链接到它们，这能解决吗。

Answer 1

如果加载的页面已经有hash标记，那么窗口上的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/