HTML5 的 frameset 替代方案

来源：互联网发布：日本药妆品牌知乎编辑：程序博客网时间：2024/05/22 10:30

HTML5 已经不支持 frame 来实现页面框架了。只能另辟蹊径，jQuery 的 load()方法，就可以很好的解决这个问题。

下面用使用三个页面来完成导航页面的制作。

1.主页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>load_method</title>    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>    <style>        *{margin: 0;padding: 0}        html, body{height: 100%}        #nav{float: left;width:5%;height:100%;background-color: antiquewhite}        #con{float: right;width: 95%;height:100%;background-color: aqua}    </style>    <script>        $(document).ready(function(){            //页面加载的时候，内容框默认显示 a.html            $('#con').load('./a.html');            //单击 a 链接，加载 a.html            $("#a1").click(function(){                $('#con').load('./a.html');            });            //单击 b 链接，加载 b.html            $("#a2").click(function(){                $('#con').load('./b.html');            });        })    </script></head><body><ul id="nav">    <li><a href="#" id="a1">show a</a></li>    <li><a href="#" id="a2">show b</a></li></ul><div id="con"></div></body></html>

2.页面a

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><p>I'm a page!</p></body></html>

3.页面b

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><p>I'm b page!</p></body></html>

0 0