一個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