实现左侧导航栏点击，右侧显示对应页面的布局

最新推荐文章于 2025-02-11 17:17:03 发布
转载 最新推荐文章于 2025-02-11 17:17:03 发布 · 5.2w 阅读 · 63

本文介绍了一段JavaScript代码，用于动态调整iframe元素的高度以匹配浏览器窗口的高度，并通过修改iframe的src属性来实现页面内容的动态加载。适用于网页应用中左侧菜单栏点击时右侧内容区更新的场景。

简单介绍下面js代码的意思：

<script type="text/javascript">
$(function() {
var height=document.documentElement.clientHeight;
document.getElementById('iframe-page-content').style.height=height+'px';
});
var menuClick = function(menuUrl) {
$("#iframe-page-content").attr('src',menuUrl);
};
</script>


第一段代码作用是为了保证iframe中右侧页面的高度，使之和浏览器客户端高度一致；
第二段代码作用是实现点击左侧菜单栏，右侧内容页随之改变的效果，iframe中改变其src即可改变它加载的内容
显示一侧的代码：

<iframe id="iframe-page-content" src="${base}resource/html/myindex.jsp" width="100%"  frameborder="no" border="0" marginwidth="0" marginheight=" 0" scrolling="no" allowtransparency="yes"></iframe>


layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
10-16
在本文中，我们将探讨如何使用layui框架来实现一个功能，即当用户点击左侧导航栏时，不刷新整个页面，仅刷新页面的特定区域。layui是一个轻量级的前端UI框架，它提供了丰富的组件和功能，使得开发人员可以方便地构建...
layui实现左侧菜单点击右侧内容区显示
10-16
在这个问题中，我们主要讨论如何使用layui来实现左侧菜单点击后，右侧内容区动态加载对应的内容。 首先，layui的布局基于HTML5的`<div>`元素和CSS类来构建页面结构。在描述的示例中，我们可以看到一个典型的layui...
使用网页嵌套iframe标签，点击左侧导航栏，在右侧动态显示页面的信息
17902的博客
03-09 2955
题目： 设计一个框架，分成左、右两个页面，左边页面包含各个超链接，单击超链接时，右边的页面上将显示相应的表单内容。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .main_left{ widt
html左侧导航栏右侧显示内容
无心
08-02 3万+
效果图 代码 复制下来直接运行就可以 <!doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.
记录原生html+js实现左侧导航栏右侧内容页
weixin_53715817的博客
10-17 6456
html+css+javascript+echarts设计的demo，快来学习吧
iframe 点击左侧导航列表 右侧出现对应界面
weixin_30411239的博客
08-26 781
HTML 代码结构如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <u...
左侧导航栏右侧内容
weixin_53715817的博客
07-13 4517
菜单与内容联动，实现左侧三级菜单并且点击左侧导航栏菜单跳转对应页面
记录原生html+js实现左侧导航栏右侧内容页的实现
10-17
以上代码实现了基本的左侧导航栏右侧内容页的功能。当用户点击导航链接时，`switchContent`函数会根据链接的`pageId`参数动态生成并显示对应内容页。你可以根据实际需求扩展此功能，比如添加动画效果、使用Ajax异步...
ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容
10-21
在***中实现点击左边页面链接时，右边iframe框架显示对应链接页面的内容，是一种常见的网页布局模式，经常被用于后台管理系统中。这种布局允许用户在一个窗口内操作导航，而在另一个子窗口内查看和处理内容，从而...
客户端布局 --- 左侧导航栏右侧内容页
最新发布
weixin_43868793的博客
02-11 351
在稍稍复杂一点客户端，需要承载许多内容，通常会采用左侧导航栏右侧内容页的框架布局。用Qt实现可以简单的采用 QTreeWidget + QTabWidget来实现。可以把左侧菜单导航配置到文件。
html5左侧边导航右边显示页面,bootstrap如何实现左侧导航栏右侧网页
weixin_29579377的博客
06-02 6809
方式一：采用iframe,即将网页放入iframe这个容器中。方式二：采用div的话绑定a或者li的点击事件 阻止a的默认行为，用jquery的load()可以来加载这个div，即将网页放入div中。方式三：angular的嵌套路由也可以实现。不过本人对angular不是很了解，所以这种方式没有去试。方式四：采用ajax技术，实现局部刷新。(本人觉得该方式比较麻烦，就不在这细说了)。二者的实现方式...
左侧导航右侧显示内容 php,html – 侧栏导航和右侧显示内容
weixin_42310670的博客
03-19 618
为标签略微调整标记,并将标识更改为类以进行样式设置：City GalleryLondonParisLondonLondon is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitant...
HTML--点击左侧导航栏，更新右侧页面(iframe)
热门推荐
huyishero的博客
01-11 4万+
在项目中，需要实现点击左侧栏目的条目，右侧的内容随之改变。 这里使用iframe实现 先写一个列表用于显示左侧的条目 &lt;!-- 左侧导航 --&gt; &lt;div class="main_left" style="height:100%"&gt; &lt;ul&gt; &lt;li data-src="roa...
点击左侧导航菜单，在右侧动态显示页面
weixin_44070283的博客
12-30 2013
网页嵌套
点击左侧导航链接, 会在右侧显示对应页面。(transform: translate(-50%, -50%))
gy99csdn的博客
02-18 1082
1.点击左侧导航链接, 会在右侧显示对应页面, 仅要求实现样子 提示: 浮动 边框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { width: 130px; height: 300p
左栏导航 右栏内容显示
runner_123的博客
04-14 6852
一、 核心iframe方法一：改变元素显示、隐藏状态&lt;div style="width: 20%; float: left"&gt; &lt;div id="butten" style="cursor: pointer;"&gt; 左栏导航一 &lt;/div&gt; &lt;div id="hidden" &gt;
网页设计，本页面内左侧菜单导航右侧显示内容简单实现方法
qq_27131259的博客
10-10 1万+
首页       基本信息       休假记录       加班记录       资质记录       合同记录                       // 是一种简单实现，一个页面内的两个div，一个里面是菜单，一个里面放置iframe，实现了加入菜单链接后跳转到本页面的div里面
实现导航页面，点击左侧导航链接, 会在右侧显示对应页面（CSS）
AC_872767407的博客
03-17 4569
文章目录 1, 实现导航页面，点击左侧导航链接, 会在右侧显示对应页面 提示: <a> <iframe> 浮动 边框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 150px;
左边导航栏 右边内容 用js javascript 实现
nash01的专栏
05-23 2514
js代码 ------------------------------------------------------------------------------------------ 说明：当执行showContent时，在id为right_content的ifame框架中显示该url所指向的html或者jsp文件 [code="java"] function showCo...
jsp实现点击左侧导航栏后右侧显示信息但左侧信息也消失了
05-11
这个问题通常是因为你在点击左侧导航栏后，整个页面会发生刷新或跳转，导致左侧信息也被重置了。解决这个问题有两种方法： 1. 使用前端框架，例如 Vue、React 等，实现单页应用（SPA）的效果，在不刷新页面的情况下切换右侧内容。这样就不会重置左侧信息了。 2. 使用 AJAX 技术，在点击左侧导航栏时，异步请求右侧内容并更新右侧区域，同时保留左侧信息的状态。这个方法需要后端提供对应的接口，以供前端异步请求数据。 下面是一个简单的示例代码，使用 jQuery 实现点击左侧导航栏异步加载右侧内容： ```html <!DOCTYPE html> <html> <head> <title>左右布局</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="sidebar"> <ul> <li><a href="#" data-target="content1">内容1</a></li> <li><a href="#" data-target="content2">内容2</a></li> <li><a href="#" data-target="content3">内容3</a></li> </ul> </div> <div class="content"> <p>请选择左侧导航栏中的项</p> </div> <script> $(function() { $('.sidebar a').click(function(event) { event.preventDefault(); // 阻止默认跳转行为 var target = $(this).data('target'); // 获取目标内容的标识 $('.content').load(target + '.html'); // 使用 jQuery 的 load 方法异步加载内容 }); }); </script> </body> </html> ``` 在上面的示例中，左侧导航栏使用 `<a>` 标签，并通过 `data-target` 属性指定目标内容的标识，例如 `data-target="content1"` 表示目标内容的标识为 `content1`。右侧内容区域使用 `<div class="content">`，初始显示一段默认的提示文字。在 JavaScript 中，使用 jQuery 的 `$('.sidebar a').click` 绑定点击事件，并阻止默认跳转行为。然后获取目标内容的标识，并使用 jQuery 的 `load` 方法异步加载对应的内容。在这个示例中，目标内容的 HTML 文件命名为 `content1.html`、`content2.html`、`content3.html`，对应标识为 `content1`、`content2`、`content3`。
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值