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如果您在文档中链接了它，您不应该真正改变。你覆盖它吗？在页面顶部声明您CSS正在执行 ajax 调用，并且在 ajax 加载时仅DIV使用 ajax 调用的内容更新该元素或任何元素。我用这个插件来做到这一点，它对我很有用。即使在页面刷新时，我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 回答