没有哪种教育能及得上逆境 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

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

正则速查

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

最新回复

  • : 感谢,我现在才知道还有快捷键这个东东!!!
  • 1: 天书啊
  • memory: 可以去官方网站找找手册了,好久不玩它了.
  • xiaoyan: 怎么解决的啊
  • 银行建设: 生产环境应该怎么搭建redis集群呢?
  • memory: 好久没折腾WIN了?不确认哟。
  • 虫虫: tomcat apache nginx能装吗
  • 咚咚: 开源的放一个吧
  • memory: 好几年不更新了。。。
  • liqitian: 不能用呀
  • 广州网站建设: 了解
  • memory: 这是测试,不建议正式环境这样使。
  • 广州网站建设: 构建redis集群时候,不要使用生产环境
  • memory: 照着大差不着的改一下就成了rewrite ^/sort/([0-...
  • mage: 按照上面设置的伪静态url是类似这种形式的 /listinfo-...
  • mage: 比如这种URL:帝国7.5伪静态如何可以做到这种形式(拼音或者英...
  • memory: 额,难住我了,哈哈。我项目中没有用过这么复杂的。