以哈希值加载页面,然后直接显示结果,而不先显示索引


load page at its hash, then display the result directly without showing the index first

on http://zentili.koding.com 我有这个 JavaScript,它将链接菜单项的内容加载到索引页的主 #contentdiv 中,并应用一个哈希值,其中包含加载页面的名称减去".php",否则它会加载哈希 + ".php"如果在 URL 中输入。 效果很好。另一方面,ENG/ITA 条目在 url 中添加 ?locale=lang_LANG,就在哈希之前,因此本地化也可以正常工作。如果您看起来不错,您可能会注意到,当您在 ENG 和 ITA 之间切换时,索引内容在进入哈希之前只显示一会儿。我知道这是因为页面首先被加载,然后被带到哈希,但我想知道是否有某种方法可以隐藏主页并在加载时直接转到哈希位置。

这是我菜单的代码:

<script type="text/javascript"> 
$(document).ready(function() {  
var hash = window.location.hash.substr(1);  
var href = $('#menubar a.item').each(function(){  
var href = $(this).attr('href');  
if(hash==href.substr(0,href.length-4)){  
    var toLoad = hash+'.php';  
    $('#content').load(toLoad);  
    $("#menubar a.item").removeClass("current");
    $(this).addClass("current");
}  
});
$('#menubar a.item').click(function(){  
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); 
var toLoad = $(this).attr('href');
    $('#content').fadeOut('fast',loadContent);  
    function loadContent() {  
    $('#content').load(toLoad,'',showNewContent)  }  
    function showNewContent() {  
    $('#content').fadeIn('fast');  }
    $("#menubar a.item").removeClass("current");
    $(this).addClass("current");
    return false; 
});
});
function goENG(){
    var hash = window.location.hash;
    var eng = '?locale=en_EN';
        window.location.replace(eng+hash) ;
};
function goITA(){
    var hash = window.location.hash;
    var ita = '?locale=it_IT';
        window.location.replace(ita+hash) ; 
};
</script>

函数 goENG() 和 goITA() 是通过 ENG 和 ITA a 上的 onclick 调用的。我希望找到一些解决方案。

页面无法直接转到链接。它将按其自然顺序加载,然后进入哈希。对于您想要实现的目标,我相信有一个简单的解决方案。

  1. 隐藏主要内容div,直到文档加载。 为此使用 CSS 规则"可见性:隐藏"
  2. 如果有任何哈希,请加载它,然后使内容可见。
  3. 如果 url 中没有哈希,则在 dom 加载时使内容可见。

       $(document).ready(function() {  
            var hash = window.location.hash.substr(1);  
            if ($('#menubar a.item').length > 0) { 
                var href = $('#menubar a.item').each(function(){  
                    var href = $(this).attr('href');  
                    if(hash==href.substr(0,href.length-4)){  
                        var toLoad = hash+'.php';  
                        $('#content').load(toLoad, function(){
                            $('#content').attr('visibility', 'visible');
                        });  
                        $("#menubar a.item").removeClass("current");
                        $(this).addClass("current");
                    } else {
                        $('#content').attr('visibility', 'visible');                    
                    }  
                });
            } else {
                $('#content').attr('visibility', 'visible');
            }
        });
    

--更新--

如果您将 #content 设置为"可见性:隐藏"

$('#content').attr('visibility', 'visible'); 

应该始终开火,否则您的 #contentdiv 将不可见。这里的诀窍是在我们完成哈希检查后将其设置为可见。您可以继续在div 中加载内容并使其可见。使div #content 可见不需要在完全加载哈希后完成。