0

http://zentili.koding.comに、インデックスページのメインの#content div内にリンクされたメニュー項目のコンテンツをロードし、ロードされたページの名前から'を引いた名前のハッシュを適用するこのJavaScriptがあります。 .php'、それ以外の場合は、URLに入力されている場合はハッシュ+'.php'をロードします。非常にうまく機能します。一方、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およびITAaのonclickを介して呼び出されます。私はこれに対するいくつかの解決策を見つけたいと思っています。

4

1 に答える 1

0

ページから直接リンクに移動することはできません。自然な順序でロードされ、ハッシュに移動します。あなたが達成したいことのために、私が信じている簡単な解決策があります。

  1. ドキュメントが読み込まれるまで、メイン コンテンツ div を非表示にします。これには CSS ルール " visibility:hidden " を使用します
  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 を「visibility:hidden」に設定している場合

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

常に起動する必要があります。そうしないと、#content div が非表示になります。ここでの秘訣は、ハッシュのチェックが完了した後に可視に設定することです。コンテンツを div にロードし続けて、表示することができます。ハッシュを完全にロードした後に #content div を表示する必要はありません。

于 2013-02-01T06:15:31.970 に答える