さて、私はこれを行う方法を研究しようとして失敗しました。Jquery replaceWithで可能だと思いますが、実装方法がわかりません。
基本的に私はナビゲーション用にこれらのアイコンを持っています:
<li><a href="#navclose" class="open"><span>MAINSTREAM</span><img src="images/stacks/mainstream.png" alt="MAINSTREAM" /></a></li>
<li><a href=""><span>THOUGHT MENU</span><img src="images/stacks/thoughtmenu.png" alt="THOUGHTMENU" /></a></li>
<li><a href="#"><span>Redrawing the Maps</span><img src="images/stacks/redrawnmaps.png" alt="Photoshop" /></a></li>
各アイコンをクリックすると、情報を変更したい(メインのiframeコンテンツにWebページをロードしたい)場合、変更したい項目はURL「http://www.redrawingthemaps.org.uk/」と日付情報です。ここで2012年6月に開始されました:
<div id="navclose">
<div id="navfunction" >
<div id="searchbar"><ul class="navfunction2">
<li>http://www.redrawingthemaps.org.uk/</li>
</ul></div>
<ul class="navfunction">
<li style="margin-right:-2px;"><a href="#navclose" class="close">Close</a></li>
<li><a href="http://www.redrawingthemaps.org.uk/" target="_blank">Open In New Window</a> </li>
<li>Initiated June 2012</li>
</ul>
</div>
<div id="navcontent"><iframe src="http://www.redrawingthemaps.org.uk/" width="1000px" height="3000px" frameborder="0"></iframe></div>
</div>
<script>
$(function() {
$('a.open').click(function() {
$($(this).attr('href')).slideDown(500);
return true;
});
$(function() {
$('a.close').click(function() {
$($(this).attr('href')).slideUp(500);
return false;
});});
});});
</script>