一个Title list 锚点程序

 上次看到思愿君写了一个pc端的软件用来搜索一遍html文件，而后输出一个新的html文件，而这个文件是包含了标题锚点列表的。例若有时候咱们想写一些文章，分为不少部分，每一个部分须要有一个标题，让文章看起来很是的有条理。有了这个想法，那么咱们就很是天然地想到要用更加方便的方法来输出这个带有锚点的列表到文档里面了，很天然地也就想到了javascript（很高兴我知道js能干些什么）。将下列的代码复制到你的博文的html源代码中，你就能够完成这个任务了，是否是造福了广大博客爱好者啊？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
// when the page is loaded
$(document).ready( function(){
		
		//  first create the ul element

		$('body').prepend('<ul id="title_anchors"></ul>');
		// alert($('body').html());
		// first give you an cycle to search for the title
		// only list h3 
		var count = 1;
		$('h3').each(function(){
			// give the title an anchor address
			$(this).attr('id', 'title'+count);
			$(this).attr('name', 'title'+count);
			
			// add the anchor list to the ul
			var list_item = $(this).text();  		// get the text and write into the list	
			$('ul#title_anchors').append('<li> <a href="#title'  +count+ ' ">'+list_item+' </a></li>');  // add to the ul list	
			count ++; 				// increase the count
		});
			
	}); 
	
</script>

这个代码的原理就是选取出全部的h3 元素（是的，就是h3,也就是说你的标题要是h3的，若是不想用h3,你能够将上面的代码中的$('h3')改成 $('hx')，其中x是数字1,2等）

这也是缺陷之一，要手工改代码，可是我一想，简单一点有简单一点的好处，即便能搞出一个嵌套的标题列表（大标题嵌入小标题），

也就成了目录了，那么博文也不叫博文，而叫book了。哈哈，其实你明白的我只是技术不济而已。其原理就是选取DOM中的h3元素，而后

向其中添加id和name属性，而后创建一个带连接的列表，每一个连接都是一个锚点，对应着一个h3。

下面作一个实例：example

1. 写好一篇文章，为全部的标题写好标签<h3> </h3>
2. 将代码复制到你的文章源代码中，通常编辑器中都有一个“html源代码”按钮
3. 还要干什么，不用了，发布你的文章吧

 

by bibodeng 2012-10-18