效果
想实现如下图所示的效果，文章自动生成目录，在页面滚动时对应的标签被激活。
scroll_1.png
实现
1、html文档
<html>
<head>
<title>自动生成右侧导航栏</title>
</head>
<body>
<div id="article">
<h2>书籍目录<a class="anchor" href="#a0"></a></h2>
<p>很多字。。。。</p>
<h2 >作品试读<a class="anchor" href="#a1"></a></h2>
<p>很多字。。。。</p>
<h2 >购买须知<a class="anchor" href="#a2"></a></h2>
<p>很多字。。。。</p>
<h2 >注意事项<a class="anchor" href="#a3"></a></h2>
<p>很多字。。。。</p>
<h2>用户点评<a class="anchor" href="#a4"></a></h2>
</div>
<div id="nav"></div>
</body>
</html>
<div id="nav"></div>用来放生成的导航栏。
2、生成导航
提取出html文件中的h2标签生成导航目录列表。
var html = ['<ul>'];
var headings = document.querySelectorAll('#article h2');
for(var i = 0; i < headings.length; i++) {
var id = 'a' + i;
var el = headings[i];
el.id = id;
html.push('<li><a href="'+el.childNodes[1].href+ '" id = "'+id + i+'">'+el.firstChild.nodeValue+'</a>');
}
html.push('</ul>');
var nav = document.getElementById('nav');
nav.innerHTML = html.join('\n');
导航目录成功生成了，下一步需要实现页面滚动时对应的导航栏标题高亮的效果。
3、页面滚动导航栏标签高亮
$(function(){
$(window).scroll(function(){
var wst = $(window).scrollTop();
var title = document.querySelectorAll('#article h2');
for(i=0; i<title.length; i++){
if($("#a"+i).offset().top <= wst){
$('#nav a').removeClass("c"); //c是标签激活的class
$('#a'+i+i).addClass("c");
}
}
});
});
4、点击激活标签
$('#nav a').click(function(){
$('#nav a').removeClass("c");
$(this).addClass("c");
});
给页面中的导航标签添加点击事件，点击时激活。
功能就全部实现了，做做页面美化就好看了。
