主要內容：左側的導航框架包含了一個鏈接列表，這些鏈接將第二個框架作為目標。第二個框架顯示被鏈接的文檔。導航框架其中的鏈接指向目標文件中指定的節。
創建3個html,分別為 index.html ，content.html，link.html.
index.html的代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>使用框架導航跳轉至指定的節</title> 6 </head> 7 <frameset cols="180,*"> 8 <frame src="使用框架導航跳轉至指定的節_content.html"/> 9 <frame src="使用框架導航跳轉至指定的節_link.html" name="showframe"/> 10 <!-- <noframes></noframes>--> 11 </frameset> 12 </html>
index.html主要時frame的框架結構，左側為導航框架，右側為鏈接框架。
content.html的代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用框架導航跳轉至指定的節</title> 6 </head> 7 <body> 8 <a href="使用框架導航跳轉至指定的節_link.html" target="showframe">頁首</a> 9 <br> 10 <a href="使用框架導航跳轉至指定的節_link.html#C1" target="showframe">第1章</a> 11 <br><a href="使用框架導航跳轉至指定的節_link.html#C2" target="showframe">第2章</a> 12 <br><a href="使用框架導航跳轉至指定的節_link.html#C3" target="showframe">第3章</a> 13 <br><a href="使用框架導航跳轉至指定的節_link.html#C4" target="showframe">第4章</a> 14 <br><a href="使用框架導航跳轉至指定的節_link.html#C5" target="showframe">第5章</a> 15 <br><a href="使用框架導航跳轉至指定的節_link.html#C6" target="showframe">第6章</a> 16 <br><a href="使用框架導航跳轉至指定的節_link.html#C7" target="showframe">第7章</a> 17 <br><a href="使用框架導航跳轉至指定的節_link.html#C8" target="showframe">第8章</a> 18 <br><a href="使用框架導航跳轉至指定的節_link.html#C9" target="showframe">第9章</a> 19 <br><a href="使用框架導航跳轉至指定的節_link.html#C10" target="showframe">第10章</a> 20 </body> 21 </html>
這是跳轉的設定，其中target指向內容需要設置相同。
link.html的代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1><a name="C1">Chapter 1</a></h1> 9 <p>This chapter explains ba bla bla</p> 10 <h1><a name="C2">Chapter 2</a></h1> 11 <p>This chapter explains ba bla bla</p> 12 <h1><a name="C3">Chapter 3</a></h1> 13 <p>This chapter explains ba bla bla</p> 14 <h1><a name="C4">Chapter 4</a></h1> 15 <p>This chapter explains ba bla bla</p> 16 <h1><a name="C5">Chapter 5</a></h1> 17 <p>This chapter explains ba bla bla</p> 18 <h1><a name="C6">Chapter 6</a></h1> 19 <p>This chapter explains ba bla bla</p> 20 <h1><a name="C7">Chapter 7</a></h1> 21 <p>This chapter explains ba bla bla</p> 22 <h1><a name="C8">Chapter 8</a></h1> 23 <p>This chapter explains ba bla bla</p> 24 <h1><a name="C9">Chapter 9</a></h1> 25 <p>This chapter explains ba bla bla</p> 26 <h1><a name="C10">Chapter 10</a></h1> 27 <p>This chapter explains ba bla bla</p> 28 <h1>Chapter 11</h1> 29 <p>This chapter explains ba bla bla</p> 30 <h1>Chapter 12</h1> 31 <p>This chapter explains ba bla bla</p> 32 <h1>Chapter 13</h1> 33 <p>This chapter explains ba bla bla</p> 34 <h1>Chapter 14</h1> 35 <p>This chapter explains ba bla bla</p> 36 <h1>Chapter 15</h1> 37 <p>This chapter explains ba bla bla</p> 38 <h1>Chapter 16</h1> 39 <p>This chapter explains ba bla bla</p> 40 <h1>Chapter 17</h1> 41 <p>This chapter explains ba bla bla</p> 42 </body> 43 </html>
為跳轉的具體內容。
以下為效果截圖：
歡迎小伙伴們指正和修改！