Question

我有一个页面，其中包含用于导航的标题div，用于内容的内容div以及仅包含一些静态信息的页脚div。

这个想法是，当您点击标题栏中的内容时，内容div会相应地更改其内容。我希望将每个内容元素存储在自己的文件中，以便于开发。我怎样才能填写下面我写的magicLoad函数？

我目前没有使用任何框架（jquery浮现在脑海中），但我肯定不反对使用它。如果我在这里违反了其他最佳做法，我也很想知道，但我的主要目标是从外部网页加载。我怎么能这样做？

这是我现在设置的基本骨架模型。（当然，这不仅仅是那3个，但这些足以说明这一点。）

<html>
    <script type="text/javascript">
    function show(which) {
        document.getElementById(which).innerHtml = magicLoad(which + ".html");
        return false;
    }       
    function showHome() { show('home'); return false;} // for onload

    </script>
    <body>
    <div id="header">
        <a href="javascript:void(0)" onclick="show('home')">HOME</a> |
        <a href="javascript:void(0)" onclick="show('training')">TRAINING</a> |
        <a href="javascript:void(0)" onclick="show('audits')">AUDITS</a>
    </div>
    <div id="content">

    </div>
    <div id="footer">

    </div>
    </body>
    <script> window.onload=showHome; </script>
</html>

Answer 1

使用以下，简单直接的

$('#which').load('test.html');

如果哪个作为参数

$('#'+which).load('test.html');

Answer 2

如果您想将其他网页嵌入其中，则应考虑使用<iframe>。类似的东西：

<script type="text/javascript">
function show(which) {
    document.getElementById(which).src=which+".html";
    return false;
}       
function showHome() { show('home'); return false;} // for onload

</script>
<iframe id="home"></iframe>

将innerhtml替换为外部页面

2 个答案: