框架可以實現在同一瀏覽器窗口,瀏覽不同的頁面。一個頁面的超鏈接一般跳轉到一個新的瀏覽器窗口,而導航框架可以通過超鏈接在同一窗口顯示不同的頁面。接下來展示一下導航鏈接的實現。
實現一個簡易的導航框架,我們需要5個html文件,此處分別命名為:frame_a,frame_b, frame_c,index, content。其中frame_a,frame_b, frame_c只需設定背景顏色。
以下為其代碼:
1.frame_a.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body bgcolor="antiquewhite"> 8 <h2>Frame a</h2> 9 </body> 10 </html>
2.frame_b.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body bgcolor="aqua"> 8 <h2>Frame b</h2> 9 </body> 10 </html>
3.frame_c.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body bgcolor="bisque"> 8 <h2>Frame c</h2> 9 </body> 10 </html>
4.index
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="{CHARSET}"> 5 <title></title> 6 </head> 7 <body bgcolor="gray"> 8 <p><a href="frame_a.html" target="content">Frame_a</a></p> 9 <p><a href="frame_b.html" target="content">Frame_b</a></p> 10 <p><a href="frame_c.html" target="content">Frame_c</a></p> 11 12 13 </body> 14 </html>
5.content.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="{CHARSET}"> 5 <title></title> 6 </head> 7 <frameset cols="20%,*"> 8 <frame src="index1.html" /> 9 <frame src="frame_a.html" name="content" /> 10 </frameset> 11 </html>
該文件將主界面分為index和content兩部分。index中為index.html文件中三個鏈接,content顯示選中的html文件。
index.html文件中包含frame_a,frame_b, frame_c三個文件的鏈接,且將target屬性設置為content.
實現的效果如下: