0

我的问题有点复杂。

我有以下代码：

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                           
    });

    $('#nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

好的，首先它不是我编写的，所以我真的不明白它的作用，我也试图改变它，但我没有成功。该代码将选择一个“nav li”链接并以 AJAX 方式显示页面，这意味着无需重新加载它。它正确地做到了这一点:) 现在，我要做的就是添加一个fancybox 来注册用户。为此，我应该添加以下代码。

$("a#reg").fancybox({
    'hideOnContentClick': false
});

现在我只是将代码放在 $document.readyfunction 中，花哨的盒子可以正常工作，nav li 链接也可以正常工作。那么问题出在哪里？当我点击“nav li”链接并加载内容然后再次点击主页链接时，（我返回第一页），花式框不再起作用。我知道它非常敏感，所以可能你对它有不好的理解，所以让我换一种方式解释它。我有'nav li'的选择器和花式框链接的选择器，让它们一起工作的最佳方法是什么？

也有人可以向我解释代码的作用。
谢谢你。

4

1 回答 1

2

好的......这是代码的作用：

    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
                var toLoad = hash+'.html #content';
                $('#content').load(toLoad)
        }                                                                                       
    });

第一部分将获取当前页面的哈希值，检查其中一个“nav li”链接是否以该哈希值结尾（预期为 5 个字符），如果是这种情况，将在当前页面的元素#content中加载页面元素（I假设它是一个div）。hash + ".html"#content

想象一下，您加载了网址“ http://.../page1.html#page2 ”。Page1 将被加载，然后 page2.html 的 #content 将通过 page1 的 #content 中的 ajax 调用加载。

    $('#nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
                $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
                $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
                $('#load').fadeOut('normal');
        }
        return false;

    });

这将为“nav li”链接添加以下行为：单击时，显示“加载消息”并在当前页面的#content 元素中加载目标页面的#content。

I don't have any idea why this script, despite being terrible, would cause your fancybox not to show. My guess is that the "nav li" links will load the content with an ajax call and this will not affect your fancybox, which is already loaded, but when you click the home link, the page is completely reloaded and the fancybox code is not executed, for a reason. You can check that by adding a simple alert :

alert("initializing fancybox");
$("a#reg").fancybox({
    'hideOnContentClick': false
});

If the full page is reloaded when you click the home link, and this alert does not popup, you found the cause of your problem.

于 2009-03-14T16:10:33.563 回答