按下链接时将href加载到div中？

Question

我知道之前有人问过这个问题，我尝试按照建议的方法进行操作，但似乎无法正常工作。

基本上我有这样的链接：

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

然后我有一个这样的 div：

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

我想要做的是，当我按下链接时，将链接 href 中的页面加载到 div 中。我还想阻止浏览器以正常方式导航链接。

这是我的脚本，它与 jquery 库一起加载到 html 标头中：

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

我做错了什么？

编辑：

好的，所以我将脚本放入 document.ready 中，并且 preventdefault 现在正在工作，但 href 仍未加载到 div 中。

编辑：

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

我想这样做的原因是因为我网站上的页面在所有页面上都具有相同的结构，并且我想要像框架网站一样，我只加载每个页面的内容以防止加载相同事情一遍又一遍。也许还有另一种更好的方法？

Answer 1

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

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

至少有两种选择：

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

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

第二：移动你的javascript代码，写在链接后面。

Answer 2

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

http://api.jquery.com/load/

Answer 3

将 jQuery 库添加到文档中。根据小提琴，你错过了。

Answer 4

通过您的网络服务器打开文件，例如

http://localhost/someFile.html

默认情况下，Chrome 不允许对“file:///”网址进行 AJAX 请求。使用http://localhost/的路径

Answer 5

您可以使用event.preventDefault(); 来阻止链接的默认行为：

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

确保这段代码要么包裹在$(document).ready();中，要么放在你的html底部，否则点击事件不能附加到链接上，因为它们需要先处理。

Answer 6

试试preventdefault()

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

Answer 7

更改此链接

<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>';
});