将新 html 页面动态加载到另一个 DIV (jQuery)

Question

我在网上找到这段代码，可以将 HTML 页面动态加载到 DIV:

<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function(){
           $("#page1").click(function(){
            $('#result').load('page1.html');
             //alert("Thanks for visiting!");
           }); 

           $("#page2").click(function(){
            $('#result').load('page2.html');
             //alert("Thanks for visiting!");
           });
         });
    </script>

但是，我有 3 个 DIV，即 header、nav 和 content。我希望导航 DIV 包含 3 个链接，即地质学、词汇表和图例。当有人点击链接时，我希望 header DIV 中的内容被替换，而不是导航 DIV 中的内容。这是我的裸代码，减去了上面的 Internet 脚本：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>   
</head>

<body>
<table id="maintable" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

  <tr style="width:100%; height:20%">
    <div id="header">dynamically loaded content, Geological Record onload</div>
  </tr>

  <tr style="width:100%; height:5%">
    <td><div id="navigation">Geological Record | Glossary | Legend</div>
  </tr>

  <tr style="width:100%; height:75%">
    <td><div id="content">MAIN CONTENT HTML PAGE</div></td>
  </tr>

</table>
</body>
</html>

Answer 1

使用您的元素 ID（即导航、内容和 header）代替“#result”。

将新 html 页面动态加载到另一个 DIV (jQuery)

Dynamically load new html page into another DIV (jQuery)

html

dynamic