HTML将要显示的页面放到当前页面Div标签展示

最新推荐文章于 2023-11-30 01:11:46 发布

CodeRecently

最新推荐文章于 2023-11-30 01:11:46 发布

阅读量3.1k

点赞数 5

文章标签： html js css html5 web

本文链接：https://blog.csdn.net/weixin_44790046/article/details/106769023

版权

要实现如图所示效果

在这里插入图片描述

一、我们可以使用`<iframe>`标签和a标签的target属性来实现

在这里插入图片描述
实现方式一主页代码，其中index2.html页面代码就是实现方式2的主页代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #container {
            display: flex;
        }

        #top {
            color: blueviolet;
            margin: 0 auto;
            line-height: 150px;
            font-family: 楷体;
            font-size: 24px;
            width: 100vw;
            height: 150px;
            text-align: center;
            border-bottom: solid 5px black;
        }

        #left {
            width: 150px;
            height: 800px;
            border-right: solid 5px black;
            text-align: center;
            float: left;
        }

        #right {
            box-sizing: border-box;
            width: 100%;
            height: 800px;
        }

        #container2 {
            width: 100%;
            height: 800px;
        }

        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="top">将son1、son2、son3链接在一个页面中</div>
<div id="container">
    <div id="left">
        <div style="height: 50px; width: auto;"></div>
        <ul>
            <li><a href="son1.html" target="mainFrame">打开页面1</a></li>
            <br/>
            <li><a href="son2.html" target="mainFrame">打开页面2</a></li>
            <br/>
            <li><a href="son3.html" target="mainFrame">打开页面3</a></li>
            <br/>
        </ul>
    </div>
    <div id="right">
        <div>
            <iframe src="index2.html" id="container2" name="mainFrame"></iframe>
        </div>
    </div>
</div>
</body>
</html>

子页代码类似
在这里插入图片描述
效果展示

二、实现方式二：可以用js

在这里插入图片描述
实现方式二主页代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" lang="java">
        function func(obj){
            let myFrame="mainFrame" + obj.value;
            //alert(myFrame); //mainFrame1
            //alert(obj.title);   //son1.html
            window.open(obj.title,myFrame);
        }
    </script>

    <style>
        #all{
            margin: 0 auto;
            width: 1300px;
        }

        #top {
            color: blueviolet;
            margin: 0 auto;
            line-height: 150px;
            font-family: 楷体;
            font-size: 24px;
            width: 100vw;
            height: 150px;
            text-align: center;
            border-bottom: solid 5px black;
        }

        #left{
            width: 150px;
            height: 800px;
            border-right: solid 5px black;
            text-align: center;
            float: left;
        }

        #left ul{
            list-style-type: none;
        }
        #left ul li{
            cursor: pointer;
        }

        #right{
            width: 1000px;
            height: 750px;
            float: left;
        }

        .my_class{
            width: 1000px;
            height: 250px;

        }

        *{
            padding: 0;
            margin: 0;
        }

    </style>
</head>
<body>
<div id="all">
    <div id="top">将son1、son2、son3链接在一个页面中</div>
    <div id="left">
        <div style="height: 50px; width: auto;"></div>
        <ul>
            <li title="son1.html" onclick="func(this)" value="1">打开页面1</li><br />
            <li title="son2.html" onclick="func(this)" value="2">打开页面2</li><br />
            <li title="son3.html" onclick="func(this)" value="3">打开页面3</li><br />
        </ul>
    </div>
</div>
<div id="right">
    <div class="my_class"><iframe name="mainFrame1" style="width: 100%; height: 100%;"></iframe></div>
    <div class="my_class"><iframe name="mainFrame2" style="width: 100%; height: 100%;"></iframe></div>
    <div class="my_class"><iframe name="mainFrame3" style="width: 100%; height: 100%;"></iframe></div>
</div>
</div>
</body>
</html>

效果展示
在这里插入图片描述

CodeRecently

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML将要显示的页面放到当前页面Div标签展示

要实现如图所示效果一、我们可以使用<iframe>标签和a标签的target属性来实现实现方式一主页代码，其中index2.html页面代码就是实现方式2的主页代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> #container {
复制链接

扫一扫