将innerhtml替换为外部页面 [英] Replace innerhtml with external page

查看:124
本文介绍了将innerhtml替换为外部页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have a page that consists of a header div for navigation, a content div for content, and a footer div that just has some static information.

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

The idea is that when you click on something in the header bar, the content div changes its content accordingly. I'd like to store each content element in its own file, for ease of development. How can I go about filling in this magicLoad function I've written below?

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

I'm currently not using any framework (jquery comes to mind) but I'm certain not opposed to using one. If there's other best practices I'm violating here, I'm keen to know as well, but my primary goal is to load from an external page. How can I do this?

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

Here's a basic skeleton mockup of my setup right now. (There's more than just those 3 of course, but those are enough to get the point across.)

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


推荐答案

使用以下内容,简单直接

use the following, simple and straight

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

如果它作为参数出现

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

这篇关于将innerhtml替换为外部页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆