3

ナビゲーション用のヘッダー 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>
4

2 に答える 2

4

シンプルでストレートな以下を使用してください

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

パラメータとして来ている場合

$('#'+which).load('test.html');
于 2012-06-20T05:22:05.793 に答える
3

1 つの Web ページに別の Web ページを埋め込みたい場合は、 の使用を検討する必要があります<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>
于 2012-06-20T05:08:38.893 に答える