html用frame实现导航页demo代码

2020-01-09  本文已影响0人  微微笑_蝶虹

实现效果:

整体项目结构

脚本

index.html


<!DOCTYPE html>

    <meta charset="UTF-8">

    <title>首页</title>

<frameset cols="120,*">

  <frame src="/static/html_contents.html">

  <frame src="/static/frame_a.html" name="showframe">

</html>


html_contents.html


<!DOCTYPE html>

<html lang="en">

    <meta charset="UTF-8">

    <title>Title

<body>

<div><a href="./frame_a.html" target="showframe">菜单a</a></div>

<div><a href="./frame_b.html" target="showframe">菜单b</a></div>

</body>

</html>


frame_a.html


<!DOCTYPE html>

<html lang="en">

    <meta charset="UTF-8">

    <title>Title

FA

</html>


frame_b.html


<!DOCTYPE html>

<html lang="en">

    <meta charset="UTF-8">

    <title>Title

Fb

</html>


脚本之间如何连接的原理

 <frame src="/static/frame_a.html" name="showframe"> , 这句里的name="showframe",是指定这个frame的名称为showframe,

<div><a href="./frame_a.html" target="showframe">菜单a</a></div>,这句起到的作用是指定frame_a.html这个网页在名称为showframe的flame里打开

上一篇 下一篇

猜你喜欢

热点阅读