在不同的div中加载左导航的链接内容答案

【问题标题】：load link content of left nav in different div在不同的div中加载左导航的链接内容
【发布时间】：2012-08-19 05:18:39
【问题描述】：

我有顶部导航，左侧导航，其链接由单击顶部导航链接驱动，页面本身是两列布局，左侧导航和内容容器，顶部导航

 <div id="topnav">Topic1 | Topic 2 | Topic 3</div>

    <div id="navigation">
      <!--all links from topic1 by default, or topic 2 links if topic 2 clicked-->
        <a href="home.html">Home</a>
        <a href="pictures.html">Picture</a>
    </div>
    <div id="content">
         <!-- content will load here -->
    </div>

当我点击主题 1 时，属于主题 1 的所有链接都应加载到左侧导航和当我单击图片时，我的图片应加载到#content 中。如何在 jquery 或 javascript 中执行此操作？请帮助..jquery新手在这里..

【问题讨论】：

在页面上加载 google.com 时遇到两个问题，一个是同源策略，另一个是 X-Frame-Options
我根本不想加载外部站点。它们将是我自己的 html 文件。我只是以 google.com 为例..

标签： javascript jquery css html xhtml

【解决方案1】：

HTML

<a class="loader" href="home.html">Link 1</a>
<div id="content"></div>

JavaScript（使用 jQuery）

$('a.loader').on('click', function(e) {
    e.preventDefault();
    $('#content').load($(this).attr('href'));
});

就像@Musa 所说，您正在加载的网址应该在您自己的域中。

【讨论】：

它对我来说很好用。查看我对 JavaScript 所做的编辑并尝试一下。另外，您使用的是 jQuery，是吗？ jquery.com
你能发布你的代码吗？这应该适合你。什么浏览器？您是否将示例更改为使用e.preventDefault()？
哦！施！我没有使用 $(document).ready() ...这是造成它的原因吗？
运行您的代码没有问题。你用的是什么浏览器？
你能把你的代码放在 jsfiddle 中，然后把链接发给我吗？

【解决方案2】：

你可以使用框架：

index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Site</title>
</head>
<frameset rows="100,*">
  <frame src="topnav.htm" name="topnav" />
  <frameset cols="300,*">
    <frame name="navigation" />
    <frame name="content" />
  </frameset>
</frameset>
</html>

topnav.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Topnav</title>
</script>
</head>
<body>
<a href="topic1.htm" target="navigation">Topic 1</a> | 
<a href="topic2.htm" target="navigation">Topic 2</a> | 
<a href="topic3.htm" target="navigation">Topic 3</a> | 
</body>
</html>

topic1.htm：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Topic1</title>
</script>
</head>
<body>
<a href="content1-1.htm" target="content">Content 1</a> | 
<a href="content1-2.htm" target="content">Content 2</a> | 
<a href="content1-3.htm" target="content">Content 3</a> | 
</body>
</html>

然后，创建你的

content1-1.htm
content1-2.htm
content1-3.htm

对 topic2.htm 和 topic3.htm 执行相同操作

【讨论】：

请不要以这种方式使用 iframe。
@tptcat 真的那么糟糕吗？我从我前段时间制作的一个页面中获取了代码，当时我不知道 w3c 及其标准是什么（我已经改进了它，添加了 doctype 和其他东西）。但它有效，所以我认为它（或多或少）很好。
当然。它可以工作，很好，但它不是解决这个问题的一种非常干净、简单或优雅的方法（看看你的示例中有多少额外的代码）。一般来说，iframe几乎绝不是正确的方法。