我正在尝试在一个简单的页面上动态加载内容。我想淡入我正在尝试链接的 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