用jquery实现文章自动生成二级目录(续)
使用方法的补充
我们可以把我们的js和css上传到博客园,然后在页面HTML代码中使用他们。
发现的一些问题
在我把我的js放到自己的博客园上运行之后发现了几个问题:
- 博客园博客的子标题用的是h2,自动生成目录的js把博客的子标题也加入到了目录中。
- 写了一篇比较长的博客,发现用目录跳到某处后没有链接返回目录处,有些不方便。
- 每次写完文章还得在文章的HTML中加目录的div。
解决问题
参考:薰衣草的旋律的一篇文章。
- 博客园子标题的问题,只要把一级标题的选择器改一下就好。
- 在每个标题前面加上回到顶部的标签。
- 在js中自己加div并放到文章所在层的开头。
- 另外增加了一些css和js动画,让目录显示在页面右侧并且靠边。
最后的代码
js:
var flag = 0; $(document).ready(function() { GenerateContents2(); contents_show(); }); function GenerateContents() { var num = 0; var content = "<ul>"; $("#cnblogs_post_body h3").each(function(){ //原来是$("h2") content += "<li>" + GenerateA(num,$(this).text()) + "</li>"; $(this).before(GenerateLabel(num)); num++; }); content += "</ul>" content = packeageContent(content); if($('#cnblogs_post_body').length != 0 ) { $($('#cnblogs_post_body')[0]).prepend(content); } } function GenerateContents2() { var num = 0; var content = "<ul>"; $("#cnblogs_post_body h3").each(function(){ content += "<li>"+GenerateA(num,$(this).text()); $(this).before(GenerateLabel(num)); num++; var second = $(this).nextUntil("#cnblogs_post_body h3","#cnblogs_post_body h4"); if (second) { content += "<ul>"; second.each(function(){ content += "<li>"+GenerateA (num,$(this).text())+"</li>"; $(this).before(GenerateLabel(num)); num++; } ); content += "</ul>"; }; content += "</li>"; }); content += "</ul>"; content = packeageContent(content); if($('#cnblogs_post_body').length != 0 ) { $($('#cnblogs_post_body')[0]).prepend(content); } } //这两个函数本来想的是以后改着方便 function GenerateLabel(num) { var a = "<div><a name = 'label" + num + "'></a>"; a += "<a href='#top' style='float:right'>回到顶部</a>" a += "</div>" return a; } function GenerateA(num ,text) { var ss = "<a href='" + "#label" + num +"'>" + text + "</a>"; return ss; } function packeageContent(content) { var tmp = "<a name='top'></a>" ; tmp += "<div id='contents'>"; tmp += "<div id='button'><b style='font-size:18px'>阅读目录</b></div>"; tmp += "<div id='contents_main'>"; tmp += content; tmp += "</div>"; tmp += "</div>"; return tmp; } function contents_show(){ var button = $("#cnblogs_post_body #contents #button"); $(button).click( function(){ if (flag == 0) { $("#contents_main").show("slow"); flag = 1; } else { $("#contents_main").hide("slow"); flag = 0; } } ); }
css代码:
#cnblogs_post_body #contents { position: fixed; right: 0px; top: 454px; background-color: #FFF6DC; border: 2px solid #FEC447; } #contents_main a { height: 1.4em; display: block; } #cnblogs_post_body #contents #button { width: 2em; float: left; text-align: right; } #cnblogs_post_body #contents #button:hover { background-color: #fff; } #cnblogs_post_body #contents #contents_main { display: none; float: right; } #cnblogs_post_body a { text-decoration: none; color: #2769C0; padding: 1px 2px; } #cnblogs_post_body a:hover{ color: #fff; background-color: #78AFD3; padding: 1px 2px; } #cnblogs_post_body ul li { list-style: inherit!important; margin-bottom: 0.1em; }
虽然样式有点丑。。