0

シンプルなページにコンテンツを動的にロードしようとしています。リンクしようとしている 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 ページ

<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
4

1 に答える 1

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コンテンツを読み込もうとしている場合、これはすべて無駄です。

于 2013-07-09T16:26:59.120 に答える