Html 如何在目标 div 中打开链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12129086/
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
how to open a link in the targeted div
提问by xing
I want to show the content of home.html page in the " right_side " div of the page. How can I do that?
我想在页面的“ right_side ” div 中显示 home.html 页面的内容。我怎样才能做到这一点？
link.html-----------------------
link.html---------------
<html>
<head>
<title>Link Example</title>
</head>
<body>
<div id="left_side">
<a href="home.html" >Home</a>
<a href="products.html" >Home</a>
</div>
<div id="right_side">
</div>
</body>
</html>
回答by Gaurav Mishra
Instead of div you can simply use iframe. Just put
您可以简单地使用 iframe 而不是 div。就放
<iframe name="right_side" src="" width="100%"
height="100%" frameBorder="0"></iframe>
In place of your right side div.
代替您的右侧 div。
and replace <a href="somelink">to <a href="somelink" target="right_side">
并替换<a href="somelink">为<a href="somelink" target="right_side">
回答by derabbink
Assuming you want a dynamic solution: You could use something like jQuery to retrieve the HTML/DOM of your home.html file, and then insert the relevant DOM-subtree from home.html into the #right_side div.
假设您想要一个动态解决方案：您可以使用类似 jQuery 的东西来检索 home.html 文件的 HTML/DOM，然后将 home.html 中的相关 DOM 子树插入 #right_side div。
Otherwise (not dynamic): Just copy & paste the contents. But that's too trivial, I suppose.
否则（非动态）：只需复制并粘贴内容。但这太琐碎了，我想。
回答by Staulen Green
Use Ajax instead. Write something like this
请改用 Ajax。写这样的东西
<a href="javascript: loadXMLDoc();" >Home</a
and in your headimplement that. I added a javascript google jquery location. You must have that "right_side" div in your css. The location of the file home.htmlmust be accurate. Check whether it works.
在你的head实现中。我添加了一个 javascript google jquery 位置。你的css中必须有“right_side”div。文件的位置home.html必须准确。检查它是否有效。
loadXMLDoc()
加载XMLDoc()
<html>
<head><script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js]"></script>
<title>Link Example</title>
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("right_side").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","home.html",true);
xmlhttp.send();
}
</script></head>
<body>
<div id="left_side">
<a href="javascript:loadXMLDoc()" >Home</a>
<a href="products.html" >Home</a>
</div>
<div id="right_side">
</div>
</body>
</html>
