左边导航 右边分屏 框架实现

Posted kaibindirver

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了左边导航 右边分屏 框架实现相关的知识,希望对你有一定的参考价值。

左边导航,点击右边 跳转对应页面

实现:

技术图片

 

 

CCC2.html    #主框架代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据操作平台</title>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
display: flex;
}
.left {
flex: 0 0 200px;
padding: 10px;
margin: 0;
}
.left li {
cursor: pointer;
}
.left li:hover {
color: blue;
}
.right {
flex: 1;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<ul class="left">
<li class="item" frameSrc="{{ url_for(‘FenLan‘) }}">B2C落地页_数据操作</li>
<li class="item" frameSrc=#>第二个iframe</li>
<li class="item" frameSrc=#>第三个iframe</li>
<li class="item" href=#>第三个iframe</li>
</ul>
<iframe src="a.html" frameborder="0" class="right"></iframe>
</div>
<script>

window.onload = function () {
var items = document.getElementsByClassName(‘item‘)
var iframe = document.getElementsByClassName(‘right‘)[0]
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
iframe.src = this.attributes[1].value
}
}
}
window.onload
</script>
</body>
</html>

 

右侧页面 框架 all.html

<html>

<frameset rows="25%,50%,25%">

<frame src="{{ url_for(‘Check‘) }}" noresize="noresize">   #禁止分屏 拖动 添加 
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">

</frameset>

</html>

 

右侧 第一个视图

<style type="text/css">
div.pos_left
{
position: absolute;
top:40px;
left:220px
}

div.su
{
width:0;
height:150px;
border-style: ridge;
border-left:50px;
border-color:black;
position: absolute;
top:40px;
left:620px
}

</style>


<div class="su"></div>

{% if form and form.errors %}
{% for key, error in form.errors.items() %}
<div>{{ error }}</div>
{% endfor %}
{% endif %}

{% set messages = get_flashed_messages()[0] %}
{{ messages }}

<div class="pos_left">
</br>
<b>输入要删除的用户相关落地页信息</b>
</br></br>
<form action="{{ url_for(‘Check‘) }}" method="post">
<input style="width:100%;height:35;" id="user_id" name="user_id"
type="text"
placeholder="输入要删除的 user_id">
</br>
<input style="margin-top:15px; cursor:hand" id="btn-submit" type="submit"
value="执 行 操 作">
</br>
</form>

</div>
<div style="position:absolute; top:40px;left:670px">
<p>只有测试用户数据才可操作,添加测试用户请找管理员</p>
<p>目前测试用户user_id如下:</p>
<p>"22343" , "332"</p>
</div>

以上是关于左边导航 右边分屏 框架实现的主要内容,如果未能解决你的问题,请参考以下文章

html框架如何实现左边为导航栏,右边为连接页面,代码写出来

ThinkPHP框架学习 --- 后台管理系统如何用iframe点击左边右边局部刷新

layui如何左侧点击,右侧显示内容?

网站技术干货之bootstrap框架实现网站后台管理界面

HTML5 左侧导航右侧内容

HTML使用DIV+CSS如何实现左边导航,右边显示内容,点击那个导航显示那个内容