一、新建3个.html文件用作目标框架
(1)新建1.html
<html> <body style="background-color:red"> <p>Frame-1</p> </body> </html>(2)新建2.html
<html> <body style="background-color:green"> <p>Frame-2</p> </body> </html>(3)新建3.html
<html> <body style="background-color:blue"> <p>Frame-3</p> </body> </html二、新建all.html,汇总以上3个.html文件
<html> <a href="1.html" name="content">Frame-1</a><br/> <a href="2.html" name="content">Frame-2</a><br/> <a href="3.html" name="content">Frame-3</a><br/> </html> 备注:在此处,3个name属性值均为content,在NavFrame.html文件中将会被引用,可以自行尝试修改看原因
备注:all.html文件中此时为三个链接,点击任意任意链接将重新打开对应的窗口
三、新建NavFrame.html文件,该文件用于显示两个模块
<html> <frameset cols="50%,*"> <frame name="all" src="all.html"> <frame name="content" src="1.html"> </frameset> </html>备注:首次打开将默认显示1.html文件中的内容,注意cols取值
结果图,点击左侧任意链接右侧显示会响应切换。