己所不欲,勿施于人 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

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个
  • 发布文章:1553篇
  • 用户评论:834条
  • 开博至今:4337天

正则速查

[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 只匹配最近的一个字符串;不重复匹配

最新回复

  • 小云: 不错
  • tper: 你列子中按分类归档的图片,每个分类下面显示分类下的文章的代码是怎...
  • 小云: 写的很不错
  • 女装品牌: 文章不错支持一下
  • memory: 升级之后不能访问是密码套件的事儿。其实可以配置好一个写公共文件引...
  • 欧文斯: 很奇怪,都升级之后 443 SSL 加密不能访问,其他端口却可以
  • 子午书屋: 好久没使用memcache了
  • 小云: 写的不错,谢谢分享
  • yiye: 楼主你好,不知道我回复的邮件您看到没?我下载的JPress不是最...
  • memory: 海哥最近更新的新版的我还没有测试过。具体原因还不清楚。不过你可能...
  • yiye: 楼主,我下的是最新的官方mysql镜像,然后密码用户名都正确,数...
  • memory: 这个是15年的文章了,这几年不知道有没有变化 。 你可以根据错误...
  • nice: 请教下这个评论审核提示代码是直接在评论模板调用的吗,我直接用了...
  • vultr: 学习了
  • 小云: 厉害,实用
  • memory: NND。自己写的看不懂了。。。
  • memory: 服务器上的一个配置.