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 base一起加载到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

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

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

确保此代码包含在$(document).ready();中或将其放在html的底部，否则点击事件无法附加到链接，因为它们需要先处理。

Answer 2

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

当这些元素尚未出现在文档中时，如果尝试将函数绑定到某些元素，则会发生这种情况。你说这个代码是标题，所以我认为是这样的。

至少有两个选择：

首先：在document.ready函数中写下你的javascript代码：

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

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

Answer 3

尝试使用preventdefault（）

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

Answer 4

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

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

Answer 5

更改此链接

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

Answer 6

将jQuery库添加到doc。基于小提琴，你已经错过了。

Answer 7

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

http://localhost/someFile.html

Chrome默认情况下不允许对'file：///'网址发出AJAX请求。使用http://localhost/

的路径

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

7 个答案: