iframe实现左侧超链接，右侧显示内容

最新推荐文章于 2021-06-11 17:06:38 发布
最新推荐文章于 2021-06-11 17:06:38 发布
阅读量5.8k 收藏 59
点赞数 12
分类专栏： 随笔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42832800/article/details/100117345
版权
此方法常用在 后台管理系统 的页面布局上。核心：利用 html 中的 iframe标签，结合超链接的 target 属性实现。效果：在图中的粉色内容右边位置，显示对应的 html 链接的内容，而不是出现在一个新的、全屏的页面上。点击 a.html 超链接点击 b.html 超链接点击 c.html 超链接HTML核心代码<body><div c...
摘要由CSDN通过智能技术生成
此方法常用在 后台管理系统 的页面布局上。

核心：利用 html 中的 iframe标签，结合超链接的 target 属性实现。
效果：在图中的粉色内容右边位置，显示对应的 html 链接的内容，而不是出现在一个新的、全屏的页面上。

  • 点击 a.html 超链接

点击超链接 a.html

  • 点击 b.html 超链接

在这里插入图片描述

  • 点击 c.html 超链接

在这里插入图片描述
HTML核心代码

<body>
<div class="header">
  header
</div>
<div class="center">
    <div id="left"
最低0.47元/天 解锁文章
久违i-i
关注
  • 12
    点赞
  • 踩
  • 59
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
左侧菜单栏控制右侧页面内容切换
01-18
在这个场景中，我们关注的是一个基于"jQuery + Bootstrap"的示例项目，它实现了左侧菜单栏控制右侧页面内容切换的功能，并且结合了Bootstrap的弹框展示。下面我们将深入探讨这个项目的核心技术和实现细节。 首先，...
a标签和iframe的使用
KBkongbaiKB的博客
02-19 1207
跳转到百度</a>a标签的作用是你可以通过它跳转到你所想要的页面，其基本格式为：<a href="" target="">
iframe标签实现左侧超链接，右侧显示内容
zouyang920的博客
03-09 1162
效果图： 项目图：
Layui实现左侧点击菜单，右侧显示内容
热门推荐
红烧大熊猫的博客
08-16 2万+
Layui实现左侧点击菜单，右侧显示内容 功能简介： layui实现点击左侧的菜单，在右侧显示内容。 其实并不是非要layui前端框架，这个左侧点击，右边显示内容的原理是iframe完成的，其它框架都可以实现。 1、核心代码 1.1 左侧菜单核心代码：也就三个普通的超链接，赋予了data-src属性，后面是对应的action地址 <dd class="main_left"&gt...
HTML5 实现左边单击链接时，右边显示内容
分享我的点点滴滴，在成长路上与你同行！
12-13 6343
效果: <style type="text/css"> p,ul,li,div,a { margin: 0px; padding: 0px; } #dd { /*大小*/ width: 100%; height: 300px; } ul { /*左边导航*/ width: ...
HTML点左边显示右边frameset,HTML里frameset框架
weixin_42523693的博客
06-11 582
目标:把一个网页分成头、左、右三部分。三级结构头里的内容所包含的子内容显示在左侧。左侧里的内容所包含的子内容(是具体内容)显示在右侧。思路:先用frameset框架把结构写出来，并且给每一部分起个name比如top、left、right。操作的时候就是在操作这个名字。就比如每个人都有个名字，跟别人打交道时直接叫名字。top里显示的内容相当于是每一个大的文件夹，不是具体的内容。比如明星、乐器。所以，...
使用网页嵌套iframe标签，点击左侧导航栏，在右侧动态显示页面的信息
17902的博客
03-09 2608
题目： 设计一个框架，分成左、右两个页面，左边页面包含各个超链接，单击超链接时，右边的页面上将显示相应的表单内容。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .main_left{ widt
左侧菜单，右侧内容的布局，使用iframe（常见于系统后台）
weixin_43974281的博客
03-28 6407
这种布局多见于系统后台管理，基本分为三部分，即顶部标、左侧菜单、右侧内容。 基本功能是点击左侧菜单，右侧内容转到相应的界面。点击顶部logo回到首页。 一种方式是用iframe，在内容区里使用框架。 顶部代码 <!-- 作者：offline 时间：2020-03-19 描述：顶部蓝条 --> <div c...
【JQuery】JQuery+JS实现点击左边， 右边出现相应的页面
每一名出色的架构师，必定是一位优秀程序员
08-23 1万+
一. 用iframe方法实现点击左边， 右边出现相应的页面。 我做一个后台， 而且他指出别人没有用iframe, 问我行不行。 只能说行。 没有在网上查看过多的资料， 某天晚上突然想起ajax 里面有一个load方法， 这个方法可以载入其他页面的内容。 于是有了灵感， 开始也只是尝试一下： 统计报表 进货报表 出货报表 毛利报表
折叠菜单--实现左边目录，右边显示
weixin_30729609的博客
12-26 728
用iframe标签 1.先有一个显示界面，用iframe分别显示左右的界面 <%-- Created by IntelliJ IDEA. User: Skye Date: 2017/12/26 Time: 9:21 To change this template use File | Settings | File Templates. --%>...
iframe的用法
12-19
java中简单易用的框架技术，实现一个页面内点击左边的超链接可以在右边显示具体的内容。类似frameset，但是比frameset更好用更方便
HTML框架标签超链接标签控件标签PPT学习教案.pptx
10-01
语法格式如下：, *">垂直划分两部分，即页面以左右结构分割，左边 200 像素，右边为剩余部分（* 表示剩余）。,*,300">水平划分三部分，顶部 150 像素，中间为剩余部分，底部为 300 像素。 框架集标签 frameset 中的...
HTML 使用浮动框架.doc
07-17
例如，创建一个包含左侧菜单栏和右侧主要内容的页面，可以使用浮动框架和CSS布局： ```html <!DOCTYPE ...
Web前端基础：HTML5浮动框架.pptx
05-06
4. `marginheight`和`marginwidth`: 设置框架的内边距，即顶部和底部、左侧和右侧的空白区域。 5. `name`: 定义`<iframe>`的名称，这在与超链接配合使用时很重要。 6. `scrolling`: 控制是否显示滚动条，值可以是`...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+图像识别与定位+该数据集相关的研究论文
07-27
<项目介绍> 包含131 种水果、蔬菜和坚果的 90380张的高质量图像数据集+该数据集相关的研究论文。可供深度学习图像识别与定位。 - 训练集大小：67700 个图像 测试集大小：22888 个图像 文件名格式：image_index_100.jpg（例如 32_100.jpg）或 r_image_index_100.jpg（例如 r_32_100.jpg）或 r2_image_index_100.jpg 或 r3_image_index_100.jpg。 “r”代表旋转水果。 “r2”表示水果绕第三轴旋转。 “100”来自图像尺寸（100x100 像素）。 水果是如何拍摄的: 1:使用 C920 摄像机拍摄水果。最好的网络摄像头之一。 2:在水果后面，我们放了一张白纸作为背景。 3:将水果和蔬菜种植在低速电机（3转/分钟）的轴中，并录制一段20秒的短片。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
iframe怎么实现点击左侧菜单按钮右侧主体内容改变
04-19
可以使用 JavaScript 监听左侧菜单按钮的点击事件，然后动态改变 iframe 的 src 属性，实现右侧主体内容的改变。具体实现方法可以参考以下代码： HTML 代码： ```html <div> <ul> <li><a href="#" data-src="page1.html" class="menu-item">菜单1</a></li> <li><a href="#" data-src="page2.html" class="menu-item">菜单2</a></li> <li><a href="#" data-src="page3.html" class="menu-item">菜单3</a></li> </ul> <iframe id="main-frame" src="page1.html"></iframe> </div> ``` JavaScript 代码： ```javascript var menuItems = document.querySelectorAll('.menu-item'); // 获取所有菜单按钮 for (var i = 0; i < menuItems.length; i++) { var menuItem = menuItems[i]; menuItem.addEventListener('click', function(event) { event.preventDefault(); // 禁止默认的链接跳转行为 var src = this.getAttribute('data-src'); // 获取按钮对应的页面链接 // 动态改变 iframe 的 src 属性 var mainFrame = document.getElementById('main-frame'); mainFrame.src = src; }); } ```
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值