HTML导航框架

    xiaoxiao2022-07-03  119

    一、新建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取值

    结果图,点击左侧任意链接右侧显示会响应切换。

     

     

    最新回复(0)