效果
想實現(xiàn)如下圖所示的效果含懊，文章自動生成目錄身冬，在頁面滾動時對應的標簽被激活。
scroll_1.png
實現(xiàn)
1岔乔、html文檔
<html>
<head>
<title>自動生成右側(cè)導航欄</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');
導航目錄成功生成了腿时，下一步需要實現(xià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");
});
給頁面中的導航標簽添加點擊事件，點擊時激活看铆。
功能就全部實現(xiàn)了徽鼎，做做頁面美化就好看了。
