特定の部門に外部ページコンテンツを読み込む

Question

特定の部門に外部ページのコンテンツを表示したいとします。私はiframeのようないくつかの解決策を見つけましたが、何も私をあまり助けません。

<ul class="nav nav-pills"> 
    <li class="active"> 
     <a data-toggle="pill" href="#home">Account Details</a> 
    </li> 
    <li>  
     <a data-toggle="pill" href="#menu1">Wish List</a> 
    </li> 
    <li> 
     <a data-toggle="pill" href="#menu2">Edit ACCOUNT</a> 
    </li> 
</ul> 

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE" ## 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE1" ## 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE2" ## 
    </div> 
</div> 

どうすればいいですか？ Rorys'はコメントをもとに、あなたのhtmlのための

Answer 1

アプローチ：

$("#home").load("/MTSITE/PAGE", function() { 
    console.log("Loaded content for home."); 
}); 

$("#menu1").load("/MTSITE/PAGE1", function() { 
    console.log("Loaded content for menu1."); 
}); 

$("#menu2").load("/MTSITE/PAGE2", function() { 
    console.log("Loaded content for menu2."); 
}); 

あなたのコンソールでログをしたくない場合は、あなたが使用することができます。

$("#menu2").load("/MTSITE/PAGE2"); 

Answer 2

あなたはこれらの方法のように行うことができますajaxを使って

jsFiddle：https://jsfiddle.net/eua98tqa/10/

HTML：

<ul class="nav nav-pills"> 
<li class="active"> 
    <a data-toggle="pill" href="#home">Account Details</a> 
</li> 
<li>  
    <a data-toggle="pill" href="#menu1">Wish List</a> 
</li> 
<li> 
    <a data-toggle="pill" href="#menu2">Edit ACCOUNT</a> 
</li> 
</ul> 
<div class="tab-content"> 
<div id="home" class="tab-pane fade in active"> 

</div> 
<div id="menu1" class="tab-pane fade"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE1" ## 
</div> 
<div id="menu2" class="tab-pane fade"> 
    ## I WANT CONTENT OF "/MTSITE/PAGE2" ## 
</div> 
</div> 

Javascriptを：

$.get('Your URL') 
.fail(function(xhr, err){ 
$('#home').append("No data"); 
}) 
.then(function(responseData) { 
    //responseData is the contents of the other page. Do whatever you want with it. 
    $('#home').append(responseData); 
});