javascript 按下链接时将 href 加载到 div 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29267956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load a href into a div when pressing a link?
提问by Mark
I know this has been asked before and I tried to do what was suggested but I can't seem to get it working.
我知道以前有人问过这个问题，我试着按照建议的去做，但我似乎无法让它发挥作用。
Basically I've got links like this:
基本上我有这样的链接：
<ul>
<li class='current'><a href='portfolio/index.html'>portfolio</a></li>
<li><a href='about/index.html'>about</a></li>
</ul>
And then I've got a div like this:
然后我有一个这样的 div：
<div class='loaded_content'></div>
What I want to do is, load the page in the link href into the div as I press the link. I also want to prevent the browser from navigating the link the normal way.
我想要做的是，当我按下链接时，将链接 href 中的页面加载到 div 中。我还想阻止浏览器以正常方式导航链接。
This is the script I have, which is loaded in the html header along with the jquery base:
这是我拥有的脚本，它与 jquery 库一起加载到 html 标头中：
$(document).ready(function() {
$('a').click(function(event){
event.preventDefault();
$('.loaded_content').load($(this).attr('href'));
return false;
});
});
What am I doing wrong?
我究竟做错了什么？
edit:
编辑：
Ok so I placed the script into the document.ready and the preventdefault is now working, but the href is still not getting loaded into the div.
好的，所以我将脚本放入 document.ready 并且 preventdefault 现在正在工作，但是 href 仍然没有加载到 div 中。
edit:
编辑：
Okay so I have got this working partially now. The html is now getting loaded properly into the div but I am now facing a new problem. The page I am loading is in a subdirectory along with its own .css file and some images. How can I make sure the css is being loaded aswell?
好的，我现在已经部分工作了。html 现在已正确加载到 div 中，但我现在面临一个新问题。我正在加载的页面与它自己的 .css 文件和一些图像位于一个子目录中。如何确保 css 也正在加载？
The reason I want to do this is because my pages on the website has the same structure on all pages, and I want to have like a frame website, where I only load the content of each page to keep from loading the same things over and over. Maybe there's another, better approach of this?
我要这样做的原因是因为我在网站上的页面在所有页面上的结构都相同，并且我想要一个框架式网站，在那里我只加载每个页面的内容以防止重复加载相同的内容超过。也许还有另一种更好的方法？
回答by Mario A
You can use event.preventDefault();to prevent the default behaviour of the link:
您可以使用event.preventDefault();来阻止链接的默认行为：
$('a').click(function(event){
event.preventDefault();
$('.loaded_content').load($(this).attr('href'));
});
Ensure that this code is either wrapped in $(document).ready();or put it at the bottom of your html, otherwise the click event can not be attached to the links, because they need to be processed first.
确保这段代码要么包裹在里面，$(document).ready();要么放在你的html底部，否则点击事件无法附加到链接上，因为它们需要先处理。
回答by Hilder Vitor Lima Pereira
I think the problem is that the function isn't being called.
我认为问题在于没有调用该函数。
It can happen if you try to bind function to some elements when these elements are not yet in the document. You said that this code is the header, so, I think it is the case.
如果您尝试将函数绑定到文档中尚未包含这些元素的某些元素，则可能会发生这种情况。你说这段代码是header，所以，我觉得是这样的。
There are at least two options:
至少有两个选择：
First: Write your javascript code inside a document.ready function:
首先：在 document.ready 函数中编写您的 javascript 代码：
$(document).ready(function(){
// your on click function here
$('a').click(function(){
$('.loaded_content').load($(this).attr('href'));
return false;
});
});
Second: Move your javascript code, writing it after the links.
第二：移动你的 javascript 代码，写在链接之后。
回答by Mark
Try preventdefault ()
试试 preventdefault()
$('a').click(function(e){
e.preventDefault ();
$('.loaded_content').load($(this).attr('href'));
return false;
});
回答by TheAivis
$(document).on('click', 'a', function(e){
e.preventDefault();
$('.loaded_content').load($(this).attr('href'));
});
回答by Mark
Add the jQuery library to the doc. Based on the fiddle, u have missed that.
将 jQuery 库添加到文档中。基于小提琴，你错过了。
回答by Saagar Elias Hymany
Open the file via your web server, eg
通过您的网络服务器打开文件，例如
Chrome doesn't allow AJAX requests for 'file:///' URLs by default. Use the path with http://localhost/
默认情况下，Chrome 不允许对“file:///” URL 的 AJAX 请求。使用带有http://localhost/的路径
回答by miszczu
change link to this
更改链接到此
<a href='javasctipy:;' data-link='portfolio/index.html'>portfolio</a>
and then
接着
$('a').click(function(){
document.getElementById("loaded_content").innerHTML='<object type="text/html" data="'+$(this).attr('data-link')+'" ></object>';
});
