0

在http://zentili.koding.com上，我有这个 javascript，它在索引页面的主 #content div 内加载链接菜单项的内容，并应用加载页面名称减去“ .php'，否则它会加载散列 + '.php'，如果它在 url 中输入。效果很好。另一方面，ENG/ITA 条目在 url 中添加 ?locale=lang_LANG，就在哈希之前，因此本地化也可以正常工作。如果您仔细观察，您可能会注意到，当您在 ENG 和 ITA 之间切换时，index-content 会出现一会，然后才会进入散列。我知道这是因为页面首先被加载，然后被带到散列，但我想知道是否有某种方法可以隐藏主页并在加载时直接进入散列位置。

这是我的菜单的代码：

<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() 通过 onclick 调用 ENG 和 ITA a's。我希望找到一些解决方案。

4

1 回答 1

0

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

  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');

应该始终触发，否则您的#content div 将不可见。这里的技巧是在我们检查完哈希后将其设置为可见。您可以继续加载 div 中的内容并使其可见。完全加载散列后不需要使 #content div 可见。

于 2013-02-01T06:15:31.970 回答