ここに例があります。3 つの異なるダイビングを行い、「ホーム」、「ニュース」、「連絡先」などの 3 つの異なる ID を割り当てます。そして、ロードしたいコンテンツをそれらの div 内に配置します。
あなたのhtmlコードは以下のようになります。
<div id="home">
<h3>Home Page</h3>
<p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
onec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div id="news">
<h3>News Page</h3>
<p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
<div id="contact">
<h3>Contact Page</h3>
<p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p>Donec id elit non mi porta ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
</div>
ナビゲーションでは以下のようになります
<ul>
<li ><a onClick="showDiv(1);">Home</a></li>
<li ><a onclick="showDiv(2);">News</a></li>
<li ><a onclick="showDiv(3);">Contact</a></li>
</ul>
この後、ヘッダー セクションで ShowDiv() メソッドを定義します。
function showDiv(pageid)
{
if(pageid== 1)
{
$("#home").show();
$("#contact").hide();
$("#news").hide();
}
if(pageid== 2)
{
$("#home").hide();
$("#contact")
$("#news").show();
}
if(pageid== 3)
{
$("#home").hide();
$("#contact").show();
$("#news").hide();
}
}
ほら、1ページに3ページ分のコンテンツを読み込めるし……。