0

コードに問題があります.Html 5履歴を使用しており、コンテンツの取得とURLの変更に問題はありませんが、ページを更新すると、cssを使用したフルページのないコンテンツのみが表示され、ここに私のコード:

<script type="text/javascript">

        $(function() {
            $('.menuAnchor').click(function(e) {                
                href = $(this).attr("href");                
                loadContent(href);                  
                // HISTORY.PUSHSTATE
                history.pushState('', 'New URL: '+href, href);
                e.preventDefault();                                 
            });

            // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
            window.onpopstate = function(event) {                   
                console.log("pathname: "+location.pathname);
                loadContent(location.pathname);
            };    
        });

        function loadContent(url){
            // USES JQUERY TO LOAD THE CONTENT
             $.get(url, {}, function (data) {
                $(".contn_btm_mid_bg").html(data);
                //$.validator.unobtrusive.parse(".contn_btm_mid_bg");
            });

            // THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
            $('li').removeClass('current');
            $('a[href="'+url+'"]').parent().addClass('current');                
        }

    </script>
4

1 に答える 1

0

history.jsを使用して ajax を使用して URL を変更すると、問題なく動作します。CSSドキュメントにリンクされている場合、実際に変更する必要はありません。上書きですか？ページの先頭で ajax 呼び出しを実行していることを宣言し、ajax の読み込み時に ajax 呼び出しの内容でまたは任意の要素CSSのみを更新します。DIV私はこのプラグインでそれを行いますが、私にとってはうまく機能します。ページCSSを更新しても、常に表示されます。

<html>
<head>
<link rel="stylesheet" type="text/css" href=" linktoyourfile.css" media="screen"> 
<!--js files etc -->
</head>
<body>
<div class="contn_btm_mid_bg"><!--ajax contents--></div>
</body>
</html>

編集：

あなたの HTML や構造が見えないので、あなたのコメントに基づいてどうすればよいかを説明します。

ページ全体を呼び出さないでください。ajax 経由でインポートするコンテンツを含む div を呼び出すだけです。ページ全体ではありません。ヘッダーに含まれるすべてのページの CSS をリンクします。次に、DIV を使用してコンテンツを保持します。そのページを呼び出すときは、ページ全体ではなく DIV の ID を呼び出すだけです。例

あなたの他のページ:

次に、 ajax 呼び出しで、div がすべてのページで同じクラスを持っている場合は、以下でこれを行うことができます。他のページでも CSS をリンクしていることを確認してください。

 function loadContent(url){
            // USES JQUERY TO LOAD THE CONTENT
             $.get(url, {}, function (data) {
                $(".contn_btm_mid_bg").html($(data).find('.contn_btm_mid_bg').html());
                //$.validator.unobtrusive.parse(".contn_btm_mid_bg");
            });

            // THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
            $('li').removeClass('current');
            $('a[href="'+url+'"]').parent().addClass('current');                
        }
于 2013-04-29T07:46:40.330 に答える