H5使用div实现frameset效果

最新推荐文章于 2024-04-08 09:46:20 发布

linlinxie

最新推荐文章于 2024-04-08 09:46:20 发布

阅读量5.3k

点赞数

文章标签： html5 frameset

本文链接：https://blog.csdn.net/linlinxie/article/details/77368181

版权

由于在H5中已弃用frameset标签，因此在页面中使用时提示

Element (frameset) is obsolete. Its use is discouraged in HTML5 documents.

可以使用div标签+js实现该效果，代码如下：

    <%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%>  
·<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title>后台管理系统</title>

        <!-- Bootstrap -->

        <script src="../bootstrap/js/bootstrap.min.js"></script>
        <style type="text/css">
        .header {
            border-bottom: 1px solid #ccc;
            margin-bottom: 5px;
        }

        .MainContainer {
            min-width: 960px;
            max-width: 1600px;
        }

        .sidebar {
            width: 180px;
            float: left;
            margin-right: -180px;
            border-right: 1px solid #ccc;
            min-height: 500px;
            padding: 5px;
        }

        .main {
            float: left;
            margin-left: 200px;
            padding: 5px;
        }

        .content {
            padding: 0 10px;
        }
        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                $("#studentInfo").click(function() {
                    $("#main").load(projectPath + "/student/list", function(responseText, status, xhr) {
                        console.log("hi");
                    });
                });
            });
        </script>
    </head>
    <body>
        <div class="page">
            <div class="header">
                <div id="title">
                    <h1>学生信息管理系统后台</h1>
                </div>
            </div>
            <div class="MainContainer">
                <div class="sidebar">
                <div>
                    <p>
                        <button type="button" id="studentInfo" class="btn btn-primary btn-block">
                            学生信息管理
                        </button>
                    </p>
                    <p>
                        <button type="button" id="" class="btn btn-primary btn-block">
                            按钮 2
                        </button>
                    </p>
                </div>
                </div>
                <div id="main" class="main">内容</div>
            </div>
        </div>
        <frameset></frameset>
    </body>
</html>

实现的效果如图所示：

这里写图片描述

linlinxie

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
H5使用div实现frameset效果

由于在H5中已弃用frameset标签，因此在页面中使用时提示 Element (frameset) is obsolete. Its use is discouraged in HTML5 documents.可以使用div标签+js实现该效果，代码如下：<%@ page language="java" import="java.util.*" contentType="text/html;
复制链接

扫一扫