js根据h标题自动生成目录-网页编程网

当前位置：主页 >> 网页特效 >> 正文

js根据h标题自动生成目录

阅读：3944 输入：2022-04-12 23:18:31

<body>
<script>
/**
* 这个模块注册一个可在页面加载完成后自动运行的匿名函数，当执行这个函数时会去文档中查找
* id为‘TOC'的元素，如果这个元素不存在，就创建一个元素
*
* 生成的TOC目录应当具有自己的CSS样式，整个目录区域的样式className设置为“TOCEntry”
* 同样我们为不同层级的目录标题定义不同的样式，<h1>标签生成标题
* className为“TOCLevel1”，<h2>标签生成的标题className为“TOCLevel2”，以此类推
* 段编号的样式为"TOCSectNum"
*
* css代码的随后一行表示每个段编号之后都会有一个冒号和空格符，若要隐藏段编号，
* 请使用这行代码：
* .TOCSectNum{display:none;}
*
* 这个模块需要onLoad（）工具函数
*/
window.onload = (function(){//匿名函数定义了一个局部作用域
	//查找TOC容器元素
	//如果不存在，则在文档开头处创建一个
	var toc = document.getElementById('TOC');
	if(!toc){
		toc = document.createElement("div");
		toc.id = "TOC";
		document.body.insertBefore(toc,document.body.firstChild);
	}

//查找所有标题元素
	var headings;
	if(document.querySelectorAll){
		headings = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
	}else{	//否则，查找方法稍微麻烦一些
		headings = findHeadins(document.body,[]);
	}

//递归遍历document的body,查找标题元素
	function findHeadins(root,sects){
		for(var c = root.firstChild; c!= null; c= c.nextSibling){
			if(c.nodeType !== 1)
				continue;
			if(c.tagName.length === 2 && c.tagName.charAt(0) ==="H")
				sects.push(c);
			else
				findHeadins(c,sects);
		}
		return sects;
	}

//初始化一个数组来保持跟踪章节号
	var sectioinNumbers = [0,0,0,0,0,0];

//现在，循环已找到的标题元素
	for(var h = 0 ; h < headings.length ; h++ ){
		var heading = headings[h];

//跳过在TOC容器中的标题元素
		if(heading.parentNode == toc )
			continue;

//判定标题的级别
		var  level = parseInt( heading.tagName.charAt(1));
		if( isNaN( level ) || level < 1 || level > 6 )
			continue;

//对于该标题级别增加sectionNumbers对应的数字
		//重置所有标题比级别低的数字为零
		sectioinNumbers[level-1]++;
		for(var i = level; i<6 ; i++)
			sectioinNumbers[i] =0;

//现在，将所有标题级别的章节号组合产生一个章节号 如；2.3.1
		var sectioinNumber = sectioinNumbers.slice(0,level).join(".");

//位标题级别增加章节号
		//把数字放在<span>中，使得其可以用样式修饰
		var span = document.createElement("span");
		span.className = "TOCSectNum";
		span.innerHTML = sectioinNumber ;
		heading.insertBefore(span , heading.firstChild);

//用命名的锚点将标题包起来，以便为它增加链接
		var anchor = document.createElement("a");
		anchor.name = "TOC"+sectioinNumber;
		heading.parentNode.insertBefore(anchor , heading);
		anchor.appendChild(heading);

//现在为该节点创建一个链接
		var link = document.createElement("a");
		link.href = "#TOC"+sectioinNumber;		//链接的目标地址
		link.innerHTML = heading.innerHTML;		//链接文本与标题一致

//将链接放在一个div中，div用基于级别的名字的样式修饰
		var entry = document.createElement('div');
		entry.className = "TOCEntry TOCLevel"+level;
		entry.appendChild(link);

//该div添加到TOC容器中
		toc.appendChild(entry);
	}
});
</script>
<h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h1>这是h1</h1>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
</body>

上一篇：docker下安装mysql及phpmyadmin，多mysql安装
下一篇：php screw plus源码加密，源码保护总结

相关阅读: CSS+JS实现可控的文字列表上下滚动效果; js实现鼠标感应3D效果桌面球标签云特效; 当鼠标移动到图片上图片变暗效果实现（支持IE，Firefox）