在不同的div中加載左側導航的鏈接內容

Question

我有頂部導航，左側導航，其鏈接由單擊的頂部導航鏈接驅動，頁面本身是兩列布局，其中左側導航和具有頂部導航的內容容器

 <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新手在這里..

Answer 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所說的那樣，您要加載的URL應該在您自己的域中。

Answer 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>

然后，創建您的

內容1-1.htm
內容1-2.htm
內容1-3.htm

對topic2.htm和topic3.htm執行相同的操作

在不同的div中加載左側導航的鏈接內容

問題描述

2 個解決方案

解決方案1
0 已采納 2012-08-18 21:04:03

解決方案2
0 2012-08-18 21:18:39

在不同的div中加載左側導航的鏈接內容

問題描述

2 個解決方案

解決方案1 0 已采納 2012-08-18 21:04:03

解決方案2 0 2012-08-18 21:18:39

解決方案1
0 已采納 2012-08-18 21:04:03

解決方案2
0 2012-08-18 21:18:39