Javascript 按链接时是否将a href加载到div？

我知道以前有人问过这个问题，我试着按照建议去做，但我似乎无法让它工作

基本上我有这样的链接：

<ul>
    <li class='current'><a href='portfolio/index.html'>portfolio</a></li>
    <li><a href='about/index.html'>about</a></li>
</ul>

<div class='loaded_content'></div>

我做错了什么

编辑：

好的，我将脚本放在document.ready中，preventdefault现在正在工作，但是href仍然没有加载到div中

编辑：

好的，我现在已经部分地工作了。html现在被正确加载到div中，但我现在面临一个新问题。我正在加载的页面与它自己的.css文件和一些图像一起位于子目录中。如何确保css也被加载

我之所以想这样做，是因为我在网站上的页面在所有页面上都有相同的结构，我希望有一个框架网站，我只加载每个页面的内容，以避免反复加载相同的内容。也许还有另一种更好的方法？

更改此链接

<a href='javasctipy:;' data-link='portfolio/index.html'>portfolio</a>

然后

$('a').click(function(){
  document.getElementById("loaded_content").innerHTML='<object type="text/html" data="'+$(this).attr('data-link')+'" ></object>';
});

$（'a'）。单击（函数（）{
document.getElementById（“加载的内容”）.innerHTML=''；
});

您可以使用

event.preventDefault（）防止链接的默认行为：

$('a').click(function(event){
    event.preventDefault();
    $('.loaded_content').load($(this).attr('href'));
});

确保此代码包装在
$（document）.ready（）中或将其放在html的底部，否则单击事件无法附加到链接，因为它们需要先处理。
请尝试使用默认值（）

我认为问题在于函数没有被调用

如果您试图将函数绑定到文档中尚未包含的某些元素，则可能会发生这种情况。你说这段代码是头，所以，我认为是这样的

至少有两种选择：

首先：在document.ready函数中编写javascript代码：

$(document).ready(function(){
   // your on click function here
   $('a').click(function(){
       $('.loaded_content').load($(this).attr('href'));
       return false;
   });
});

第二：移动javascript代码，在链接后写入。
将jQuery库添加到文档中。根据小提琴，你错过了它。
通过网络服务器打开文件，例如


默认情况下，Chrome不允许AJAX请求“file://”URL。将路径与

有什么问题？当用户点击链接时会发生什么情况？当我点击链接（在Chrome中）时，它会像往常一样转到link href。请在onClick的函数中放置一个警报，并告诉我们是否调用了该函数（如果在点击链接时显示警报），然后尝试放置警报，没什么。贴一把小提琴，这样人们可以看到和帮助。这对我来说似乎没有什么不同。然后你有一个不同的问题，这是一个正在工作的JSFIDLE：这对我没有任何影响。贴一把小提琴，这样我们可以看到发生了什么。我刚刚尝试了这个。因此，我将脚本放入一个文档中，现在我知道该函数正在被调用，因为它不再导航指向href的链接。但是，href似乎没有加载到div中。页面正在重定向？否，默认设置正在工作，但href页面没有加载到。loaded_content div.XMLHttpRequest无法加载file:///E:/Coding/HTML/portfolio/index.html. 跨源请求仅支持协议方案：http、data、chrome、chrome extension、https、chrome-extension-resource.jquery_1.8.3.js-这意味着什么？这有帮助吗？不太适合SEO或可访问性（屏幕阅读器）这样创建href
$('a').click(function(e){
e.preventDefault ();
    $('.loaded_content').load($(this).attr('href'));
    return false;
});

$(document).ready(function(){
   // your on click function here
   $('a').click(function(){
       $('.loaded_content').load($(this).attr('href'));
       return false;
   });
});

$(document).on('click', 'a', function(e){
    e.preventDefault();
    $('.loaded_content').load($(this).attr('href'));
});