Question

我正在尝试在简单的页面上动态加载内容。我想淡出我想要链接的content.html，然后我点击的任何其他链接将从content.html加载一个div并淡入。我想我用.load("html.html #section");执行此操作但是这是就在我得到的时候。

这是我的<head>

    <!-- JQUERY -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <!-- SCRIPTS -->
    <script type="text/javascript">
    $(document).ready(function(){
        // $(".content").load("content.html");
        // $(".content").fadeIn(800);
        $(".menu ul li a").click(function(){
            $(".content").load("content.html");
        });
    });
</script>

主体页面，内容div我试图加载到

<body>
    <div class="wrapper">
        <div class="gradient">
            <div class="header">
                <div class="nav">
                    <div class="logo">
                        <strong>
                            <a href="index.html">
                                <img src="images/logo.png" alt="Sam Jarvis logo"/>
                            </a>
                        </strong>
                    </div>
                    <div class="menu">
                        <ul>
                            <li><a href="#home">HOME</a></li>
                            <li><a href="#about">ABOUT</a></li>
                            <li><a href="#work">PORTFOLIO</a></li>
                            <li><a href="#clients">CONTACT</a></li>
                        </ul>
                    </div>  
                </div>
            </div>
            <div class="content">

            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footerText">    
            <div class="footerCopyright">
                <p>© 2013 Sam Jarvis | Design and Development. All Rights Reserved.</p>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="#home">HOME</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#work">PORTFOLIO</a></li>
                    <li><a href="#clients">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </div>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>

控制台说

OPTIONS file://localhost/Users/eveo/Projects/Sites/Sam/content.html Origin null is not allowed by Access-Control-Allow-Origin. jquery.min.js:6
send jquery.min.js:6
x.extend.ajax jquery.min.js:6
x.fn.load jquery.min.js:6
(anonymous function) index.html:21
x.event.dispatch jquery.min.js:5
v.handle jquery.min.js:5
XMLHttpRequest cannot load file://localhost/Users/eveo/Projects/Sites/Sam/content.html. Origin null is not allowed by Access-Control-Allow-Origin. index.html:1

Answer 1

$(document).ready(function(){
     $(".menu ul li a").click(function(e){
            e.preventDefault();
            $(".content").load("content.html",function() {
                $(".content").fadeIn(800);
            });
      });
});

如果您从链接动态加载，请始终使用preventDefault()以防止任何可能的页面刷新。此外，您可以使用.load()回调.fadeIn()内容。当然，如果您尝试从文件系统加载 HTML 内容，这一切都是徒劳的。

无法使用jQuery .load加载外部html文件

1 个答案: