比别人多一点志气,你就会多一份出息 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

javascript根据html内容中的hn标题生成目录树

前端设计 memory 发布于April 27, 2018 标签: JavaScript

原始html如下

<div id="wrapper">
<h1>x</h1>
<h2>xx</h2>
<h3>xxx</h3>
<h4>xxxx</h4>
<h5>xxxx</h5>
<h2>xx</h2>
<h3>xxx</h3>
<h4>xxxx</h4>
<h3>xxx</h3>
<h4>xxxx</h4>
<h5>xxxx</h5>
</div>

核心js代码

  var sideBar = document.getElementById('sideBar');
  var sideBar_title = document.getElementById('sideBar_title');
  var siderBar_contents = document.getElementById('siderBar_contents');
  sideBar.onmouseover = function(){
    siderBar_contents.style.display = 'block';
  };
  sideBar.onmouseout = function(){
    siderBar_contents.style.display = 'none';
  };
  var h_list = document.querySelectorAll('#wrapper h1,h2,h3,h4,h5');
  var str='<dl>';
  if(h_list.length==3){
    sideBar_title.style.display = 'none';
  }
  for(var i=0; i< h_list.length;i++){
    if(h_list[i].nodeName.toLocaleLowerCase()=='h2'){
      str +='<dt><a href="#'+i+'">'+h_list[i].innerHTML+'</a></dt>';
    }else{
      str +='<dd><a href="#'+i+'">'+h_list[i].innerHTML+'</a></dd>';
    }
    h_list[i].id = i;
  }
  str+='</dl>';
  siderBar_contents.innerHTML=str;

css代码

#sideBar{position:fixed;right:0;top:10px;width:auto;height:auto;z-index:999;cursor:pointer}
#sideBar_title{float:right;width:30px;text-align:center;font-weight:bold;color:white;font-size:18px;background-color:#ff3c73}
#siderBar_contents{float:left;padding:0 10px;margin-left:10px;min-width:100px;height:520px;background-color:#ff3c73;opacity:0.9;font-size:16px;color:white;line-height:1.5em;overflow:auto;border-radius:10px 0 10px 10px}
#siderBar_contents a{color:white;font-size:14px;text-decoration:none}
#siderBar_contents a:hover{text-decoration:underline}

根据自己需要再调整

最终样式
未展开
展开

相关推荐

添加新评论

网站状态

  • 栏目分类:49个
  • 发布文章:1560篇
  • 用户评论:853条
  • 开博至今:4435天

正则速查

[abc] 匹配中括号中的单个字符,如a或b或c
[^abc] 匹配除了a、b、c等字符的其他单个字符
[a-z] 匹配一个字符范围,如a到z
[a-zA-Z] 匹配一个字符范围,如a-z 或 A-Z
^ 匹配行的开始
$ 匹配行的结束
\A 匹配一个字符串的开始
\z 匹配一个字符串的结束
. 匹配任意单个字符
\s 匹配空白字符,如空格,TAB
\S 匹配非空白字符
\d 匹配一个数字
\D 匹配非数字
\w 匹配一个字母
\W 匹配非字母
\b 匹配字符边界
(...) 引用所有括号中的内容
(a|b) a或者b
a? 零个或1个a
a* 零个或多个a
a+ 1个或多个a
a{3} 3次重复的a
a{3,} 3次或3次以上重复的a
a{3,6} 3到6次重复的a

修正符

/g 查找所有可能的匹配
/i 不区分大小写
/m 多行匹配
/s 单行匹配
/x 忽略空白模式
/e 可执行模式,PHP专有
/A 强制从目标字符串开头匹配
/D 使用$限制结尾字符,则不允许结尾有换行
/U 只匹配最近的一个字符串;不重复匹配

最新回复

  • chen: 感谢大师,搞定
  • memory: 你把采集和文章相关content的字段text类型改为bigte...
  • chen: 请教大师,phpcms采集超过1万2字就无法采集,哪里可以修改?
  • 11: 很棒
  • s站: 学习了
  • 基地小组: 好文章,非常详细,博主辛苦了
  • memory: 没事儿,这个插件有些问题。我现在已经不使用了。。。
  • 小白: 还有会缓存用户状态给下一位用户!我评论留个记录而已,,,,,
  • 小白: 再次留个记录,不知道为什么缓存页面点击文章或者分类会跳转自己解析...
  • weich: 用数据库那个缓存就正常了!有得用不错了!作者也幸苦了!
  • weich: 有点奇怪,,,哈哈哈哈!原来是那个模板登陆标签被我注释了,所以不...
  • weich: 很强大,就是有个问题登陆了可用看见网页底部模板,不登陆就看不到,...
  • J Zhiguang: valued article for a new learnner.
  • VPS234: 写得不错啊,支持一下,证书现在很多免费的吧
  • 游客: 感谢,我终于明白了markdown原来就是快捷键啊。
  • 楚狂人博客: 感谢博主分享干货
  • 天津网站建设: 写的很棒,感谢博主