html
<article>
<h1>About the band</h1>
<nav>
<ul>
<li><a href="#jay">Jay Skript</a></li>
<li><a href="#domsters">The Domsters</a></li>
</ul>
</nav>
<section id="jay">
<h2>Jay Skript</h2>
<p>Jay Skript is going to rock your world!</p>
<p>Together with his compatriots The Domsters,
Jay is set for world domination. Just you wait and see.</p>
<p>Jay Skript has been on the scene since the mid nineties.
His talent hasn't always been recognized or fully appreciated.
In the early days, he was often unfavorably compared to bigger,
similarly-named artists. That's all in the past now.</p>
</section>
<section id="domsters">
<h2>The Domsters</h2>
<p>The Domsters have been around, in one form or another,
for almost as long. It's only in the past few years that The Domsters
have settled down to their current, stable line-up.
Now they're a rock-solid bunch: methodical and dependable.</p>
</section>
</article>
//隐藏部分
function showsection(id){
var sections=document.getElementsByTagName("section");
for(var i= 0,len=sections.length;i<len;i++){
if(sections[i].getAttribute("id")!=id){
sections[i].style.display="none";
}else{
sections[i].style.display="block";
}
}
}
//点击链接,显示部分
function prepareInternalnav(){
if(!document.getElementsByTagName) return false;
var articles=document.getElementsByTagName("article");
if(articles.length==0) return false;
var navs=articles[0].getElementsByTagName("nav");
if(navs.length==0) return false;
var links=navs[0].getElementsByTagName("a");
if(links.length==0) return false;
for(var i= 0,len=links.length;i<len;i++){
var sectionID=links[i].getAttribute("href").split("#")[1];
if(!document.getElementById(sectionID)) continue;
document.getElementById(sectionID).style.display="none";
//易错点
links[i].destination=sectionID;
links[i].οnclick=function(){
showsection(this.destination);
return false;
}
}
}