diff --git a/dlg/timeline.aardio b/dlg/timeline.aardio
index fcd90e7..6b7c4d3 100644
--- a/dlg/timeline.aardio
+++ b/dlg/timeline.aardio
@@ -245,7 +245,6 @@ document.addEventListener('mousedown', function (event) {
   	target = target.parentNode; 
   } 
 }, true);
-
 //禁止弹窗函数
 //window.open =  function(url){ window.location.href = url; }
 `);
@@ -262,15 +261,20 @@ window.addEventListener('load',function(){
 document.addEventListener('mousedown', function (event) {
   var target = event.target;
   for(var i=1;target && i<=5;i++){
-  	if ( target.tagName == 'A')  {
-  		target.setAttribute('target',"_blank");
-  		return;
+  	if(target.href == null){
+  		break;
+  	}
+  	let hrefStr = target.href;
+  	console.log(hrefStr);
+  	if(hrefStr.indexOf('http://') == 0 || hrefStr.indexOf('https://') == 0){
+  		if ( target.tagName == 'A')  {
+  			target.setAttribute('target',"_blank");
+  			return;
+  		}
+  		target = target.parentNode;
   	}
-  	
-  	target = target.parentNode; 
   } 
 }, true);
-
 //禁止弹窗函数
 //window.open =  function(url){ window.location.href = url; }
 `);
@@ -794,13 +798,11 @@ winform.删除plus.oncommand = function(id,event){
 			..dbTimeline.exec("DELETE FROM ?? WHERE time=?;",{ winform.当前主题.text,tl_time} )
 			..logWarn(">>>已删除项",winform.当前主题.text,"中的：",tl_time)
 			
-			win.delay(200)
-			
-			tl_webview.xcall("removeContent",{tostring(tl_time)});
-			
 			win.delay(200)
 			winform.addUIReset(winform);
 			win.delay(200)
+			tl_webview.xcall("removeContent",{tostring(tl_time)});
+			win.delay(200)
 			winform.listboxUpdate(winform);
 			win.delay(200)
 			winform.timelineWebUpdate(winform);
diff --git a/res/template_timeline.aardio b/res/template_timeline.aardio
index 747136f..f780969 100644
--- a/res/template_timeline.aardio
+++ b/res/template_timeline.aardio
@@ -42,6 +42,19 @@ body {
   box-sizing: border-box;
 }
 
+/* TOC */
+.fixed-top {
+	position: fixed;
+	top: 10hw;
+	right: 0;
+	width: 19%;
+	height: 80%;
+	overflow: auto;
+	backdrop-filter: blur(2px);
+	font-size: 0.9em;
+	z-index: 1000;
+}
+
 /* Styling */
 .timeline {
   margin: 4em auto;
@@ -446,6 +459,7 @@ var content_js = /**
 		var ListEles = document.getElementById("listContent");
 		ListEles.innerHTML = tempTable.innerHTML;
 		window.watchImg();
+		window.updateTOC();
 	}
 
 	window.lengthList = function(){
@@ -463,6 +477,7 @@ var content_js = /**
 		var tempEle = window.createLi(datas);
 		liEle.parentNode.replaceChild(tempEle,liEle);
 		window.watchImg();
+		window.updateTOC();
 	}
 
 	window.removeContent = function(datas){
@@ -557,7 +572,6 @@ var content_js = /**
 	    let currentLi = event.currentTarget;//取出当前元素
 	    let timeIndex = currentLi.getAttribute("id");
 	    console.log(timeIndex);
-	    //console.log(event);
 	    aardio.modifyList(timeIndex);
 	}
 
@@ -1126,6 +1140,122 @@ var content_js = /**
     	}
 	};
 	
+////////////////////////////////////////////////////////////////////
+//TOC
+////////////////////////////////////////////////////////////////////
+  class TOC {
+    /**
+     * @param {[HTMLHeadingElement]} headingSet
+     * */
+    static parse(headingSet) {
+      const tocData = []
+      let curLevel = 0
+      let preTocItem = undefined
+      let idFlag = 1
+
+      headingSet.forEach(heading => {
+        const hLevel = heading.outerHTML.match(/<h([\d]).*>/)[1]
+        console.log(hLevel)
+        const titleText = heading.innerText
+
+        switch (hLevel >= curLevel) {
+          case true:
+            if (preTocItem === undefined) {
+              preTocItem = new TocItem(titleText, hLevel)
+              tocData.push(preTocItem)
+            } else {
+              const curTocItem = new TocItem(titleText, hLevel)
+              const parent = curTocItem.level > preTocItem.level ? preTocItem : preTocItem.parent
+              curTocItem.parent = parent
+              parent.children.push(curTocItem)
+              preTocItem = curTocItem
+            }
+            break
+          case false:
+            // We need to find the appropriate parent node from the preTocItem
+            const curTocItem = new TocItem(titleText, hLevel)
+            while (1) {
+              if (preTocItem.level < curTocItem.level) {
+                preTocItem.children.push(curTocItem)
+                preTocItem = curTocItem
+                break
+              }
+              preTocItem = preTocItem.parent
+
+              if (preTocItem === undefined) {
+                tocData.push(curTocItem)
+                preTocItem = curTocItem
+                break
+              }
+            }
+            break
+        }
+
+        curLevel = hLevel
+
+        if (heading.id === "") {
+          let tmpId = titleText.replace(/\s+/g,"_").toLowerCase() + "-toc-" + idFlag.toString();
+          heading.id = tmpId;
+        }
+        preTocItem.id = heading.id;
+        idFlag += idFlag;
+        console.log(preTocItem.id)
+      })
+
+      return tocData
+    }
+
+    /**
+     * @param {[TocItem]} tocData
+     * @return {string}
+     * */
+    static build(tocData) {
+      let result = "<ul>"
+      tocData.forEach(toc => {
+        result += `<li><a href=#${toc.id}>${toc.text}</a></li>`
+        if (toc.children.length) {
+          result += `${TOC.build(toc.children)}`
+        }
+      })
+      return result + "</ul>"
+    }
+  }
+
+  /**
+   * @param {string} text
+   * @param {int} level
+   * @param {TocItem} parent
+   * */
+  function TocItem(text, level, parent = undefined) {
+    this.text = text
+    this.level = level
+    this.id = undefined
+    this.parent = parent
+    this.children = []
+  }
+  
+	window.updateTOC = () => {
+		const oldTOC = document.querySelector(".fixed-top");
+		if(oldTOC){
+			console.log("delete old TOC")
+			oldTOC.remove();
+		}
+		
+		console.log('Hs Querying...')
+    	const headingSet = document.querySelectorAll("h1, h2, h3, h4, h5, h6") // You can also select only the titles you are interested in.
+    	console.log(headingSet)
+    	
+    	console.log('Rdy to Parse Datas...')
+    	const tocData = TOC.parse(headingSet)
+    	
+    	console.log('TOC Data: ')
+    	console.log(tocData)
+	
+    	const tocHTMLContent = TOC.build(tocData)
+    	const frag = document.createRange().createContextualFragment(`<fieldset class="fixed-top"><legend>TOC</legend>${tocHTMLContent}</fieldset>`)
+    	document.querySelector(`body`).insertBefore(frag, document.querySelector(`body`).firstChild)
+	}
+  
 </script>
 **/;