Javascriptを隠しマップ（インラインフレーム）

Question

これは私のコードの抜粋です：

<div id='content'> 
    <div id='map'></div> 
    <iframe name="content-wrapper"></iframe> 
</div> 
<div class="sidebar"> 
    <div class="container"> 
    <h2>Bayanihan</h2><br> 
    <a href="#" target="content-wrapper">Map</a> <a onclick= "hide()" href="forum.html" target="content-wrapper">Forum</a> <a href="insight.html" target="content-wrapper">Insight</a> 
    <hr> 
    <script> 
     function hide() { 
     $(map).hide(); 
     } 
    </script> 

基本的に、私のウェブサイトは、サイドバーで地図です。サイドバーには、3つのリンク、map, forum, insightがあります。だから私がしたいのは、[フォーラム]をクリックすると地図の背景が消えてforum.htmlに置き換えられ、同じことが洞察になります。スニペットでわかるように、私は最初にフォーラムでそれを試しています。 htmlでも動作しません。

Answer 1

私はこれに似たものを持っていました。私がしたのは、このjsを使ってすべての異なるサイトのコンテンツを変更することでした。
私は空のコンテンツdivと、独立したhtmlファイルのページの中に入ったすべてのものを持つメインページを持っていました。コンテンツを変更したいときは、ファイルの名前でこの関数を呼び出すだけで、すべてが更新されます。

function changeContent(url){ 
    $.ajax({ 
    crossOrigin: true, 
    url: url, 
    success: function(data) { 
     $('#content').html(data); 
    }, 
    error: function (xhr, status) { 
     alert("Something went wrong, try again."); 
    }, 
    }); 
} 

'' タグは、このようなものだった：
<a class="navbar-brand" href="#index"onclick="changeContent('mainPage.html');">Stuff</a> は、この情報がお役に立てば幸い！