一个人炫耀什么,说明内心缺少什么 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

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

正则速查

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

最新回复

  • memory: 没测试过...
  • 欧文斯: 对于多个 IP 段呢?比如超过 1000 个 IP 段,匹配速度...
  • 广州网站建设: 了解了,博客的通配符HTTPS证书
  • memory: https://medoo.lvtao.net/1.2/doc....
  • 贾彦东: medoo 在select的时候如何使用sum 比如 sel...
  • memory: 纯PHP文件末尾可以没有?>,你把报错信息发我一下。
  • bigwit: 因为七牛云的免费配额不能https,索性传到自己的vps上去算了...
  • bigwit: 我直接使用,报错啊,方便发我一份吗?
  • memory: 是完整的。这个就是一个简单的上传,你可以自己写个类似的也不难的。
  • bigwit: up.php是不是不完整,刚好我也有这样的需求,麻烦你看看
  • 广州网站建设: 学习了,已经收藏起来了
  • memory: 那就改一下 Widget_Stat 这个插件。增加个方法即可。
  • 梁兴健: 文章总浏览量可以有吗
  • memory: 怪我,写的太差。。。不易懂,,,我的错
  • 善行法脉--改变财运: 你是技术大牛。这个真的看不懂
  • memory: 这个太尴尬了,哈哈,,,那是10年的时候刚接触PHP写的一个类。...
  • 梦游者: //website : http://www.lvtao.ne...