正文
用jquery实现文章自动生成二级目录（续）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
前文：用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;
}
虽然样式有点丑。。
