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