Tab Atkins Jr. schrieb:
[...]
The body of page1.html could look like:
<div id="pageHeader">Recipies for vegetarians</div>
<div id="content">
<h1>Lovely broccoli</h1>
<p>Take the broccoli and do the following:</p>
...
</div>
<ul id="navigation">
<li><span>Broccoli</span></li>
<li><a href="page2.html" onlyreplace="content">Leak</a></li>
</ul>
The body of page2.html:
<div id="pageHeader">Recipies for meat eaters</div>
<div id="content">
<h1>Lovely leak</h1>
<p>Take the leak and do the following:</p>
...
</div>
<ul id="navigation">
<li><a href="page1.html" onlyreplace="content">Broccoli</a></li>
<li><span>Leak</span></li>
</ul>
[...]
(Also, in your examples you probably want @onlyreplace="content
navigation", since your nav is changing from page to page as well.
Indeed. Or, maybe I'd do it slightly differently, somehow like:
<ul id="navigation">
<li><a href="page1.html" onlyreplace="content" class="thisPage"
onClick="resetNavigation(this)">Broccoli</a></li>
<li><a href="page2.html" onlyreplace="content"
onClick="resetNavigation(this)">Leak</a></li>
</ul>
The resetNavigation() function then takes the class attribute from the
old link and adds it to the clicked one. So the navigation can be
static, and though its appearance remains consistent, whether page2.html
is completely loaded, or only the parts defined in @onlyreplace.
