标题一
标题一
标题一
标题一
孤傲苍狼
只为成功找方法,不为失败找借口!
JavaScript自动生成博文目录导航
我们在写博客的时候,如果博文里面有目录,会给人结构清晰、一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成,好像也有园友给博客园提建议,希望能够像CSDN那样能够自动生成博文目录,但是不知道是什么原因,博客园一直都没有把这个功能加上去,既然没有,那我就自己做吧,研究了2天,总算是按照自己的设想做出来了,最终效果如下:
下面来介绍一下这个小工具的实现。
一、功能描述
这个小工具要实现的核心功能只有两个:
1.自动生成博文目录。
2.点击目录标题定位到标题对应的具体内容,就像使用word生成的目录那样。
1.1、自动生成博文目录
小工具的第一个核心功能,就是通过代码自动抽取标题,然后再包装一下插入文档中。基本实现原理:首先要求博主在写博文的时候,将主标题和次级标题用 HTML标签中的 title tag(如:h1、h2、h3...)包起来;
比如"1.1、自动生成博文目录"这个次级标题现在是段落的形式
将"1.1、自动生成博文目录"设置成"标题3"
然后通过 JS 代码遍历整个包含博文正文的 <div>,过滤出这些标签,再把它们组装成自定义列表的形式,再插入到HTML文档中,如下:
1 <dl> 2 <dt>一、JAVA流式输入/输出原理</dt> 3 <dt>二、输入输出流分类</dt> 4 <dt>三、节点流和处理流</dt> 5 <dd>3.1.节点流类型</dd> 6 <dd>3.2.处理流类型</dd> 7 <dt>四、InputStream(输入流)</dt> 8 <dd>4.1.InputStream的基本方法</dd> 9 <dt>五、OutputStream(输出流)</dt> 10 <dd>5.1.OutputStream的基本方法</dd> 11 <dt>六、Reader流</dt> 12 <dd>6.1.Reader的基本方法</dd> 13 <dt>七、Writer流</dt> 14 <dd>7.1.Writer的基本方法</dd> 15 <dt>八、节点流讲解</dt> 16 <dt>九、处理流讲解</dt> 17 <dd>9.1.第一种处理流——缓冲流(Buffering)</dd> 18 <dd>9.2.第二种处理流——转换流</dd> 19 <dd>9.3.第三种处理流——数据流</dd> 20 <dd>9.4.打印流——Print</dd> 21 <dd>9.5. 对象流——Object</dd> 22 <dt>十、IO流总结</dt> 23 </dl>
如果不加任何样式,它在浏览器中的默认显示效果如下:
1.2、点击目录标题定位到标题对应的具体内容
常规实现方式:使用HTML的锚点链接
锚点也可以理解成为一种超链接,只不过它是网页内部的超链接
比如我们有一个网页很长很长,而且里面的内容,可以分为N个部分。这样的话,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。
范例:使用HTML的锚点链接定位到具体的内容
1 <html> 2 <head> 3 <title>使用HTML的锚点链接定位到具体的内容</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 </head> 6 <body> 7 <h1>目录导航</h1> 8 <dl> 9 <!--设置锚点:<a href="#title0">一、JAVA流式输入/输出原理</a> 10 点击这个超链接时就会自动定位到<h2 id="title0" name="title0">一、JAVA流式输入/输出原理</h2>这个标题所在的位置 11 --> 12 <dt><a href="#title0">一、JAVA流式输入/输出原理</a></dt> 13 <dt><a href="#title1">二、输入输出流分类</a></dt> 14 <dt><a href="#title2">三、节点流和处理流</a></dt> 15 <dd><a href="#title3">3.1.节点流类型</a></dd> 16 <dd><a href="#title4">3.2.处理流类型</a></dd> 17 <dt><a href="#title5">四、InputStream(输入流)</a></dt> 18 <dd><a href="#title6">4.1.InputStream的基本方法</a></dd> 19 <dt><a href="#title7">五、OutputStream(输出流)</a></dt> 20 <dd><a href="#title8">5.1.OutputStream的基本方法</a></dd> 21 <dt><a href="#title9">六、Reader流</a></dt> 22 <dd><a href="#title10">6.1.Reader的基本方法</a></dd> 23 <dt><a href="#title11">七、Writer流</a></dt> 24 <dd><a href="#title12">7.1.Writer的基本方法</a></dd> 25 <dt><a href="#title13">八、节点流讲解</a></dt> 26 <dt><a href="#title14">九、处理流讲解</a></dt> 27 <dd><a href="#title15">9.1.第一种处理流——缓冲流(Buffering)</a></dd> 28 <dd><a href="#title16">9.2.第二种处理流——转换流</a></dd> 29 <dd><a href="#title17">9.3.第三种处理流——数据流</a></dd> 30 <dd><a href="#title18">9.4.打印流——Print</a></dd> 31 <dd><a href="#title19">9.5. 对象流——Object</a></dd> 32 <dt><a href="#title20">十、IO流总结</a></dt> 33 </dl> 34 <hr/> 35 <div style=" width:100%;height:150px;"> 36 <!--经过测试发现,使用name的形式添加锚点在IE8和火狐下都不起作用,要设置Id才起作用 37 为了兼容,还是将name属性和id属性都一起写上,并且属性值设置成相同 38 --> 39 <h2 id="title0" name="title0">一、JAVA流式输入/输出原理</h2> 40 </div> 41 <div style=" width:100%;height:150px;"> 42 <h2 name="title1" id="title1">二、输入输出流分类</h2> 43 </div> 44 <div style=" width:100%;height:150px;"> 45 <h2 name="title2" id="title2">三、节点流和处理流</h2> 46 <h3 name="title3" id="title3">3.1.节点流类型</h3> 47 <h3 name="title4" id="title4">3.2.处理流类型</h3> 48 </div> 49 <div style=" width:100%;height:150px;"> 50 <h2 name="title5" id="title5">四、InputStream(输入流)</h2> 51 <h3 name="title6" id="title6">4.1.InputStream的基本方法</h3> 52 </div> 53 <div style=" width:100%;height:150px;"> 54 <h2 name="title7" id="title7">五、OutputStream(输出流)</h2> 55 <h3 name="title8" id="title8">5.1.OutputStream的基本方法</h3> 56 </div> 57 <div style=" width:100%;height:150px;"> 58 <h2 name="title9" id="title9">六、Reader流</h2> 59 <h3 name="title10" id="title10">6.1.Reader的基本方法</h3> 60 </div> 61 <div style=" width:100%;height:150px;"> 62 <h2 name="title11" id="title11">七、Writer流</h2> 63 <h3 name="title12" id="title12">7.1.Writer的基本方法</h3> 64 </div> 65 <div style=" width:100%;height:150px;"> 66 <h2 name="title13" id="title13">八、节点流讲解</h2> 67 </div> 68 <div style=" width:100%;height:150px;"> 69 <h2 name="title14" id="title14">九、处理流讲解</h2> 70 <h3 name="title15" id="title15">9.1.第一种处理流——缓冲流(Buffering)</h3> 71 <h3 name="title16" id="title16">9.2.第二种处理流——转换流</h3> 72 <h3 name="title17" id="title17">9.3.第三种处理流——数据流</h3> 73 <h3 name="title18" id="title18">9.4.打印流——Print</h3> 74 <h3 name="title19" id="title19">9.5. 对象流——Object</h3> 75 </div> 76 <div style=" width:100%;height:150px;"> 77 <h2 name="title20" id="title20">十、IO流总结</h2> 78 </div> 79 <div style="height:130px;"> </div> 80 <div style="height:130px;"> </div> 81 <div style="height:130px;"> </div> 82 </body> 83 </html>
这是使用HTML锚点链接的解决方案,也是一种常规的实现方式,这种方案我觉得用户体验不怎么好,跳转到具体内容的时候速度太快了,没有一种平滑过度的效果。
JavaScript实现方式
实现原理:首先通过调用 DOM 方法,判断出浏览器滚动条(scroll bar)的当前位置,记为 currentPos;然后计算出目标标题(target title)的距页面顶端的距离,记为 finalPos;最后通过一定的算法实现平滑过度。
二、源代码
下面是这个JS工具的相关源代码:
2.1 js代码
1 /* 2 功能:生成博客目录的JS工具 3 测试:IE8,火狐,google测试通过 4 孤傲苍狼 5 2014-5-11 6 */ 7 var BlogDirectory = { 8 /* 9 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top) 10 */ 11 getElementPosition:function (ele) { 12 var topPosition = 0; 13 var leftPosition = 0; 14 while (ele){ 15 topPosition += ele.offsetTop; 16 leftPosition += ele.offsetLeft; 17 ele = ele.offsetParent; 18 } 19 return {top:topPosition, left:leftPosition}; 20 }, 21 22 /* 23 获取滚动条当前位置 24 */ 25 getScrollBarPosition:function () { 26 var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop; 27 return scrollBarPosition; 28 }, 29 30 /* 31 移动滚动条,finalPos 为目的位置,internal 为移动速度 32 */ 33 moveScrollBar:function(finalpos, interval) { 34 35 //若不支持此方法,则退出 36 if(!window.scrollTo) { 37 return false; 38 } 39 40 //窗体滚动时,禁用鼠标滚轮 41 window.onmousewheel = function(){ 42 return false; 43 }; 44 45 //清除计时 46 if (document.body.movement) { 47 clearTimeout(document.body.movement); 48 } 49 50 var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 51 52 var dist = 0; 53 if (currentpos == finalpos) {//到达预定位置,则解禁鼠标滚轮,并退出 54 window.onmousewheel = function(){ 55 return true; 56 } 57 return true; 58 } 59 if (currentpos < finalpos) {//未到达,则计算下一步所要移动的距离 60 dist = Math.ceil((finalpos - currentpos)/10); 61 currentpos += dist; 62 } 63 if (currentpos > finalpos) { 64 dist = Math.ceil((currentpos - finalpos)/10); 65 currentpos -= dist; 66 } 67 68 var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 69 window.scrollTo(0, currentpos);//移动窗口 70 if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部,则解禁鼠标滚轮,并退出 71 { 72 window.onmousewheel = function(){ 73 return true; 74 } 75 return true; 76 } 77 78 //进行下一步移动 79 var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 80 document.body.movement = setTimeout(repeat, interval); 81 }, 82 83 htmlDecode:function (text){ 84 var temp = document.createElement("div"); 85 temp.innerHTML = text; 86 var output = temp.innerText || temp.textContent; 87 temp = null; 88 return output; 89 }, 90 91 /* 92 创建博客目录, 93 id表示包含博文正文的 div 容器的 id, 94 mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!), 95 interval 表示移动的速度 96 */ 97 createBlogDirectory:function (id, mt, st, interval){ 98 //获取博文正文div容器 99 var elem = document.getElementById(id); 100 if(!elem) return false; 101 //获取div中所有元素结点 102 var nodes = elem.getElementsByTagName("*"); 103 //创建博客目录的div容器 104 var divSideBar = document.createElement('DIV'); 105 divSideBar.className = 'sideBar'; 106 divSideBar.setAttribute('id', 'sideBar'); 107 var divSideBarTab = document.createElement('DIV'); 108 divSideBarTab.setAttribute('id', 'sideBarTab'); 109 divSideBar.appendChild(divSideBarTab); 110 var h2 = document.createElement('H2'); 111 divSideBarTab.appendChild(h2); 112 var txt = document.createTextNode('目录导航'); 113 h2.appendChild(txt); 114 var divSideBarContents = document.createElement('DIV'); 115 divSideBarContents.style.display = 'none'; 116 divSideBarContents.setAttribute('id', 'sideBarContents'); 117 divSideBar.appendChild(divSideBarContents); 118 //创建自定义列表 119 var dlist = document.createElement("dl"); 120 divSideBarContents.appendChild(dlist); 121 var num = 0;//统计找到的mt和st 122 mt = mt.toUpperCase();//转化成大写 123 st = st.toUpperCase();//转化成大写 124 //遍历所有元素结点 125 for(var i=0; i<nodes.length; i++) 126 { 127 if(nodes[i].nodeName == mt|| nodes[i].nodeName == st) 128 { 129 //获取标题文本 130 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签,所以用正则表达式去除HTML的标签 131 nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 132 nodetext = BlogDirectory.htmlDecode(nodetext); 133 //插入锚 134 nodes[i].setAttribute("id", "blogTitle" + num); 135 var item; 136 switch(nodes[i].nodeName) 137 { 138 case mt: //若为主标题 139 item = document.createElement("dt"); 140 break; 141 case st: //若为子标题 142 item = document.createElement("dd"); 143 break; 144 } 145 146 //创建锚链接 147 var itemtext = document.createTextNode(nodetext); 148 item.appendChild(itemtext); 149 item.setAttribute("name", num); 150 item.onclick = function(){ //添加鼠标点击触发函数 151 var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name"))); 152 if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false; 153 }; 154 155 //将自定义表项加入自定义列表中 156 dlist.appendChild(item); 157 num++; 158 } 159 } 160 161 if(num == 0) return false; 162 /*鼠标进入时的事件处理*/ 163 divSideBarTab.onmouseenter = function(){ 164 divSideBarContents.style.display = 'block'; 165 } 166 /*鼠标离开时的事件处理*/ 167 divSideBar.onmouseleave = function() { 168 divSideBarContents.style.display = 'none'; 169 } 170 171 document.body.appendChild(divSideBar); 172 } 173 174 }; 175 176 window.onload=function(){ 177 /*页面加载完成之后生成博客目录*/ 178 BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20); 179 }
2.2. CSS样式代码
1 /*生成博客目录的CSS*/ 2 #sideBar{ 3 font-size:12px; 4 font-family:Arial, Helvetica, sans-serif; 5 text-align:left; 6 position:fixed;/*将div的位置固定到距离top:50px,right:0px的位置,这样div就会处在最右边的位置,距离顶部50px*/ 7 top:50px; 8 right:0px; 9 width: auto; 10 height: auto; 11 } 12 #sideBarTab{ 13 float:left; 14 width:30px; 15 border:1px solid #e5e5e5; 16 border-right:none; 17 text-align:center; 18 background:#ffffff; 19 } 20 21 #sideBarContents{ 22 float:left; 23 overflow:auto; 24 overflow-x:hidden;!important; 25 width:200px; 26 min-height:108px; 27 max-height:460px; 28 border:1px solid #e5e5e5; 29 border-right:none; 30 background:#ffffff; 31 } 32 #sideBarContents dl{ 33 margin:0; 34 padding:0; 35 } 36 37 #sideBarContents dt{ 38 margin-top:5px; 39 margin-left:5px; 40 } 41 42 #sideBarContents dd, dt { 43 cursor: pointer; 44 } 45 46 #sideBarContents dd:hover, dt:hover { 47 color:#A7995A; 48 }
2.3.由JavaScript动态生成的HTML代码结构如下
1 <div id="sideBar" class="sideBar"> 2 <div id="sideBarTab"> 3 <h2>目录导航</h2> 4 </div> 5 <div id="sideBarContents" style="display: none;"> 6 <dl> 7 <dt name="0">一、功能描述</dt> 8 <dd name="1">1.1、自动生成博文目录</dd> 9 <dd name="2">1.2、点击目录标题定位到标题对应的具体内容</dd> 10 <dt name="3">二、源代码</dt> 11 <dd name="4">2.1 js代码</dd> 12 <dd name="5">2.2. CSS样式代码</dd> 13 <dt name="6">三、JS工具的使用</dt> 14 <dd name="7">3.1、后台管理的相关设置</dd> 15 <dd name="8">3.2、博文标题样式设置</dd> 16 <dt name="9">四、总结</dt> 17 </dl> 18 </div> 19 </div>
三、JS工具的使用
3.1、后台管理的相关设置
进入到博客后台管理,点击设置
然后在这里添加CSS样式代码,将上面的CSS样式代码直接copy到这里即可
在这里添加javascript脚本,将上面的JS源代码直接copy到这里即可
点击【保存】按钮,完成设置
3.2、博文标题样式设置
将博文标题的样式设置成标题
例如:
将"三、JS工具的使用"这个一级标题的标题样式设置成【标题2】
将"3.1、后台管理的相关设置"这个二级标题的标题样式设置成【标题3】
这样执行这段代码时就会生成如下图所示的博客目录了
1 window.onload=function(){ 2 /*页面加载完成之后生成博客目录*/ 3 BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20); 4 }
生成的目录导航在紧挨着页面最右边的滚动条,鼠标移动到【目录导航】时就会显示生成的目录内容,鼠标离开就自动隐藏目录
点击目录上的标题就会平滑跳转到该标题对应的具体内容。
四、总结
开发这个小工具的过程中还是遇到了不少的细节问题的,好在都解决了,目前做出来的效果总体来说还算比较满意,现在将代码分享出来给朋友们,可以自由修改和使用,希望对广大朋友们有所帮助吧!
分类: 原创小工具 好文要顶 关注我 收藏该文 孤傲苍狼粉丝 - 21167 关注 - 92 +加关注 65 0 « 上一篇: Javascript 面向对象编程(一):封装(转载)
» 下一篇: javascript处理HTML的Encode(转码)和Decode(解码)总结
posted on 2014-05-11 19:34 孤傲苍狼 阅读(22477) 评论(48) 编辑 收藏 举报
评论
#1楼 2014-05-11 20:23 omeweb
chrome 28 , not work , not show 支持(3) 反对(0) 回复 引用
#2楼 2014-05-11 21:58 juejiang
目录导航的功能挺实用。本来想尝试一下看看效果,发现博客园想要执行js还得先邮件申请,所以现在先把申请邮件发了,等通过了再试试。 支持(0) 反对(0) 回复 引用
#3楼 2014-05-12 07:17 数据之巅
非常实用,谢谢 支持(0) 反对(0) 回复 引用
#4楼 2014-05-12 08:47 flyher
@ juejiang
不用吧.后台不是直接有个嵌入js, 支持(0) 反对(0) 回复 引用
#5楼 2014-05-12 08:49 chenssy
这个真心不错!!!!!!! 支持(0) 反对(0) 回复 引用
#6楼 2014-05-12 08:54 troy.cui
认识了js的另类用法 支持(0) 反对(0) 回复 引用
#7楼 2014-05-12 09:05 24K纯开源
360浏览器6.3无效果。。。 支持(0) 反对(0) 回复 引用
#8楼 2014-05-12 10:21 叶小钗
这个好,收之 支持(0) 反对(0) 回复 引用
#9楼 2014-05-12 10:31 叶小钗
移动端有点问题,需要修复 支持(0) 反对(0) 回复 引用
#10楼 2014-05-12 10:34 雨知
非常好的功能,赞 支持(0) 反对(0) 回复 引用
#11楼 2014-05-12 11:09 陈大欠
@ omeweb
确实有兼容性问题,不过ie效果真不错. 支持(0) 反对(0) 回复 引用
#12楼 2014-05-12 11:34 图安
挺不错的. 赞一个 支持(0) 反对(0) 回复 引用
#13楼 2014-05-12 12:31 规格严格-功夫到家
不错。 支持(0) 反对(0) 回复 引用
#14楼 2014-05-12 12:54 cc_jony
我的chrome上显示的很好啊Google Chrome 31.0.1650.63 (正式版本 238485) m 支持(0) 反对(0) 回复 引用
#15楼 2014-05-12 13:00 Zrthas
果然切到IE6下面就不可以了。 支持(0) 反对(0) 回复 引用
#16楼 2014-05-12 13:26 沈赟
很实用,兼容性高一点就好了 支持(0) 反对(0) 回复 引用
#17楼 2014-05-12 13:27 旋转乾坤
赞~!但是我这边怎么是这样的?难道和模板有关? 支持(6) 反对(0) 回复 引用
#18楼 [楼主] 2014-05-12 14:00 孤傲苍狼
我只在我自己电脑上的IE8和火狐,google下面测试过,别的浏览器我没有安装,也无法测试,所有的代码都贴出来了,有朋友反馈说有兼容性的问题,朋友们可以自由修改代码,达到最好的兼容性,有精力的朋友也可以用Jquery去重写,Jquery的兼容性会比较好! 支持(0) 反对(0) 回复 引用
#19楼 2014-05-12 15:22 wuyudong
很实用 支持(0) 反对(0) 回复 引用
#20楼 2014-05-12 15:26 wuyudong
请问一下,不显示移动窗口,列表直接固定在文章开头怎么实现呢 支持(0) 反对(0) 回复 引用
#21楼 2014-05-12 16:44 好玩一人
好像不错,不知道兼容性怎么样? 支持(0) 反对(0) 回复 引用
#22楼 2014-05-12 17:41 会长
@ juejiang
啊,不会吧,我前几月还在博客园里写js呢,你看:http://www.cnblogs.com/zzy0471/p/3433785.html。
现在不行了? 支持(0) 反对(1) 回复 引用
#23楼 2014-05-13 10:17 juejiang
@ 会长@flyher
我对javascript不太熟,按照楼主的方式加载之后,结果如下
又看到设置界面里有这样一句话“申请js权限,请发邮件至[email protected]”,所以就做出了如上判断,现在目录导航还没有配好呢,之后可能考虑具体看看源码了,不知道各位有没有什么建议。我的浏览器是chrome 34.0
支持(0) 反对(1) 回复 引用
#24楼 [楼主] 2014-05-13 13:55 孤傲苍狼
@ juejiang
你需要发邮件至[email protected]申请使用JS的权限才行,
用QQ邮箱或者别的邮箱写一封申请开通JS使用权限的邮件,管理员通过后就可以使用了js了 支持(0) 反对(0) 回复 引用
#25楼 2014-05-18 11:18 juejiang
@ 旋转乾坤
试试这个http://www.cnblogs.com/jiangz/p/3734968.html 支持(0) 反对(0) 回复 引用
#26楼 2014-05-18 11:19 juejiang
@ 孤傲苍狼
总算配好了,我把我配置过程中遇到的问题和解决办法总结在这里了。
http://www.cnblogs.com/jiangz/p/3734968.html 支持(1) 反对(0) 回复 引用
#27楼 [楼主] 2014-05-18 22:10 孤傲苍狼
@ juejiang
恭喜你,总算成功了! 支持(0) 反对(0) 回复 引用
#28楼 2014-06-23 16:48 jason_leeee
这个解决方法,很好。感谢博主 支持(0) 反对(0) 回复 引用
#29楼 2014-06-27 16:44 控件专家
欢迎加入程序员网址导航 支持(0) 反对(1) 回复 引用
#30楼 2015-01-26 15:34 教员的小学森
自己动手,丰衣足食啊! 支持(0) 反对(0) 回复 引用
#31楼 2015-01-31 01:17 巛熊猫人灬
已转 支持(0) 反对(0) 回复 引用
#32楼 2015-02-05 09:58 SammyLiu
谢谢,终于有目录了,只是,页首HTML代码部分,你的代码需要用 <script type="text/javascript"> </script>包起来。 支持(0) 反对(0) 回复 引用
#33楼 2015-03-25 00:56 Zempty
楼主牛逼 支持(0) 反对(0) 回复 引用
#34楼 2015-03-29 20:50 加拿大小哥哥
你好,我得怎么用不了,我得用上你这个的话,特别混乱,整个页面乱掉了。
我末班
SimpleMemory,求解决 支持(0) 反对(0) 回复 引用
#35楼 2015-06-23 14:32 不要呵呵
楼主很强大。不过我觉得要是能在正文上方也生成一个大纲就完美了。期待ing... 支持(0) 反对(0) 回复 引用
#36楼 2015-10-12 13:23 威格灵
请问如何在一个独立的html文件里使用您的代码生成目录? 支持(1) 反对(0) 回复 引用
#37楼 2015-10-28 09:40 威格灵
能不能从h1到h6都创建成目录啊,有时还不一定有h1\h2,直接就是h4 h6的,做个层级自适应。期待回复 支持(1) 反对(0) 回复 引用
#38楼 2015-12-02 16:59 沧海月明FE
在手机上无法用,点不了 支持(0) 反对(0) 回复 引用
#39楼 2016-01-27 20:18 MenAngel
博主好屌! 支持(0) 反对(0) 回复 引用
#40楼 2016-03-12 13:52 *茉莉花开*
尝试了下,用不了~~o(╯□╰)o 支持(0) 反对(0) 回复 引用
#41楼 2016-07-22 10:27 天辰夜域
感谢博主,已经可用。
只是有个情况不知道是不是我这比较特殊,我是把js代码放到页脚HTML的编辑框里的。 支持(0) 反对(0) 回复 引用
#42楼 2016-08-02 17:23 亮,亮
谢谢,终于有目录了,只是,页首HTML代码部分,你的代码需要用 <script type="text/javascript"> </script>包起来。 支持(0) 反对(0) 回复 引用
#43楼 2016-11-08 21:31 mingc
这两天刚觉得需要一个目录,感觉无从下爪,参考一下,非常感谢。 支持(0) 反对(0) 回复 引用
#44楼 2017-08-29 00:51 jiangxueqiao
chrome可用,谢谢 支持(0) 反对(0) 回复 引用
#45楼 2018-04-11 10:00 javakam
@ 旋转乾坤
用<script></script>把上面的JS代码包裹起来。。-_-|| 支持(0) 反对(0) 回复 引用
#46楼 2019-08-08 18:19 但偏偏
讲的不清楚不如不讲 支持(0) 反对(0) 回复 引用
#47楼 2021-09-16 10:10 戳人痛处
棒!
支持(0) 反对(0) 回复 引用
#48楼 2021-09-16 10:12 戳人痛处
支持(0) 反对(0) 回复 引用
刷新评论刷新页面返回顶部 发表评论 编辑预览 自动补全
[Ctrl+Enter快捷键提交]
编辑推荐:· 巧用 transition 实现短视频 APP 点赞动画
· 技术基建如何降本增效——云迁移
· 一次服务器被入侵的处理过程分享
· 踩坑了!0作为除数,不一定会抛出异常!
· 基于开源方案构建统一的文件在线预览的实现历程 最新新闻:
· 我,90后,有点想住养老院
· 高通CEO:元宇宙是互联网的未来,我们对它的理解只是冰山一角
· 一年的时间,这家上海芯片独角兽又给我们带来了什么惊喜?
· GitHub 将关闭 Trending 热榜,开发者不答应
· 比尔盖茨竟然发明了个马桶,能把便便烧成灰的那种
» 更多新闻...
导航
|
|||||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
---|---|---|---|---|---|---|---|---|---|
28 | 29 | 30 | 31 | 1 | 2 | 3 | |||
4 | 5 | 6 | 7 | 8 | 9 | 10 | |||
11 | 12 | 13 | 14 | 15 | 16 | 17 | |||
18 | 19 | 20 | 21 | 22 | 23 | 24 | |||
25 | 26 | 27 | 28 | 29 | 30 | 1 | |||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
公告
昵称: 孤傲苍狼园龄: 11年4个月
粉丝: 21167
关注: 92 +加关注
统计
- 随笔 - 274
- 文章 - 0
- 评论 - 3584
- 阅读 - 1633万
搜索
常用链接
我的标签
- JavaWeb学习总结(63)
- java基础总结(29)
- Javascript学习总结(27)
- Snmp学习总结(15)
- Android开发学习总结(13)
- MyEclipse使用总结(13)
- Maven学习总结(12)
- WebLogic使用总结(9)
- MySQL学习总结(9)
- MyBatis学习总结(8)
- 更多
随笔分类
- AJAX(2)
- Android开发(12)
- ASP.NET(2)
- C#(8)
- H2数据库学习使用总结(3)
- Hessian(2)
- HTML(1)
- Java(13)
- JavaScript(27)
- JavaWeb学习总结(55)
- Java基础加强总结(3)
- java基础面试题(1)
- java基础总结(28)
- JNDI(3)
- Jquery EasyUI学习使用总结(7)
- 更多
随笔档案
- 2016年4月(4)
- 2016年3月(5)
- 2016年2月(3)
- 2016年1月(2)
- 2015年7月(11)
- 2015年3月(12)
- 2015年2月(6)
- 2015年1月(40)
- 2014年12月(17)
- 2014年11月(12)
- 2014年10月(31)
- 2014年8月(10)
- 2014年7月(25)
- 2014年6月(6)
- 2014年5月(10)
- 更多
阅读排行榜
- 1. MyBatis学习总结(一)——MyBatis快速入门(825512)
- 2. javaweb学习总结(五)——Servlet开发(一)(650320)
- 3. JavaWeb学习总结(五十)——文件上传和下载(546884)
- 4. JavaWeb学习总结(一)——JavaWeb开发入门(523665)
- 5. javaweb学习总结(十)——HttpServletRequest对象(一)(396800)
- 6. JavaWeb学习总结(十二)——Session(392277)
- 7. Linux下安装Tomcat服务器和部署Web应用(381139)
- 8. MyBatis学习总结(五)——实现关联表查询(378103)
- 9. javaweb学习总结(七)——HttpServletResponse对象(一)(370896)
- 10. Java基础学习总结——Java对象的序列化和反序列化(346105)
评论排行榜
- 1. JavaWeb学习总结(五十)——文件上传和下载(196)
- 2. MyBatis学习总结(一)——MyBatis快速入门(125)
- 3. javaweb学习总结(五)——Servlet开发(一)(99)
- 4. javaweb学习总结(二十二)——基于Servlet+JSP+JavaBean开发模式的用户登录注册(94)
- 5. 谈谈对Spring IOC的理解(82)
- 6. MyBatis学习总结(八)——Mybatis3.x与Spring4.x整合(79)
- 7. 创业公司一年工作总结(77)
- 8. JavaWeb学习总结(一)——JavaWeb开发入门(76)
- 9. MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作(75)
- 10. javaweb学习总结(四)——Http协议(68)
推荐排行榜
- 1. javaweb学习总结(五)——Servlet开发(一)(281)
- 2. 谈谈对Spring IOC的理解(225)
- 3. JavaWeb学习总结(一)——JavaWeb开发入门(223)
- 4. MyBatis学习总结(一)——MyBatis快速入门(212)
- 5. JavaWeb学习总结(五十)——文件上传和下载(166)
最新评论
- 1. Re:javaweb学习总结(四十二)——Filter(过滤器)学习
-
详细,好教程。
- 2. Re:JavaWeb学习总结(五十)——文件上传和下载
-
我是用的idea写的,同样也有下载文件的时候显示文件资源已被删除,但用了评论区一个大佬的方法,将要下载的文件命名为数字就可以下载
- 3. Re:一页纸商业计划书 (Business Plan) 模板(转载)
-
您好,如果我有一个idea,并完成以上方为模板的商业计划书了。下一步该怎么办?求指教。
- 4. Re:java基础学习总结——接口
-
npnp
- 5. Re:Java基础学习总结——Java对象的序列化和反序列化
-
想念博主啊,怎么不更新了啊
- 6. Re:java基础学习总结——异常处理
- 抛出io异常的方法,在子类里重写它的时候可以抛出fileNotFound的,但是抛exception不行,抛出/0的数学异常、格式异常也是可以的 我理解应该是抛出和父类方法所抛异常无关/或者是其子类的...
- 7. Re:JavaWeb学习总结(一)——JavaWeb开发入门
-
太感谢博主了,总结的很好,而且小白能看懂
- 8. Re:Java后端WebSocket的Tomcat实现
- @jimmyfan 没有授权,是不是用了其它框架,得放行这个路径,或者先登录...
- 9. Re:创业公司一年工作总结
- @uidoer 你真刑!...
- 10. Re:java基础学习总结——面向对象2
-
写的太棒了,关注了关注了
博客园
Copyright © 2022 孤傲苍狼
Powered by .NET 6 on Kubernetes
目录导航
标题一
标题二
标题三
标签:总结,12,05,回复,测试,2014,目录,引用 From: https://www.cnblogs.com/hitcp/p/16653915.html