使用网页嵌套iframe标签，点击左侧导航栏，在右侧动态显示页面的信息

Dear 丶 2022-04-17 06:39 387阅读 0赞

<div class="main">
       
       <div class="main_left">
            <div class="li_title">用户管理<span class="down"></span></div>
            <ul>  
                <li data-src="userAdmin.action">管理员</li>
                <li data-src="roleList.action">角色管理</li>
                <li data-src="userVip.action">会员</li>
            </ul>
            <div class="li_title">产品管理<span class="down"></span></div>
            <ul>
                <li data-src="videosList.action">视频查看</li>
                <li data-src="videosUpload.action">视频上传</li>
            </ul>
        </div>
        
        <div class="main_right">
            <iframe frameborder="0" scrolling="yes" style="width:100%;height:100%" src="" id="aa"></iframe>
        </div>
    </div>

重点部分来了，那如何当点击左侧导航如：管理员，角色管理，会员等这些，就会在右侧部分动态展示页面信息（其他部分不变呢），这里贴上js代码

$(function(){
       $(".main_left li").on("click",function(){
             var address =$(this).attr("data-src");
          $("iframe").attr("src",address);
       });
    });

到这里就结束了，当点击左侧指示列表，右侧刷新指示内容。堪称完美。  
Over！！

发表评论取消回复

表情：

评论列表（有 0 条评论，387人围观）

还没有评论，来说两句吧...

相关阅读

相关左侧导航栏和右侧页面跳转实现（JavaScript）

导航栏在网页设计中起到了重要的作用，它可以帮助用户快速地导航到不同的页面。本文将介绍如何使用JavaScript实现一个左侧导航栏，并实现点击导航项时右侧页面的跳转。首先，

矫情吗；*/ 2024年02月25日 04:59/ 0 赞/ 70 阅读

相关 layui后台布局，点击左侧栏，只有页面右侧（主体）发生改变

1、进入layUi官网——》示例——》后台布局——》获取该布局代码 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

ゝ一世哀愁。/ 2023年07月20日 08:22/ 0 赞/ 185 阅读

相关 layui左侧菜单右侧显示

首先下载编辑好的首页静态文件看一下静态文件的分布 ![在这里插入图片描述][20191026103912601.png] 菜单页面加入如下html内容静态文件地址进

港控/mmm°/ 2023年06月10日 06:27/ 0 赞/ 323 阅读

相关微信小程序点击左侧列表显示右侧内容

效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

谁践踏了优雅/ 2022年12月13日 12:58/ 0 赞/ 233 阅读

相关 flutter导航栏点击无效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2

小灰灰/ 2022年11月29日 03:07/ 0 赞/ 216 阅读

相关微信小程序 - 点击导航栏标签切换变色（导航栏当前hover样式）

效果图 ![在这里插入图片描述][202008171850293.gif_pic_left] 实现这个功能，借助一个切换标识，当与各标签项 `index` 对应

迈不过友情╰/ 2022年11月28日 13:24/ 0 赞/ 412 阅读

相关 Vue - 点击导航栏当前标签后变色功能（导航栏当前hover样式）

效果图 ![在这里插入图片描述][20200817173617973.gif_pic_left] 实现这个功能，借助一个切换标识，当与各标签项 `index`

心已赠人/ 2022年11月28日 13:19/ 0 赞/ 500 阅读

相关 Layui实现点击左侧导航栏菜单，在右侧内容生成对应的目录页，可右键删除所有页

实现的效果图： ![在这里插入图片描述][20210319151754396.gif_pic_center] PS：本人其他界面还没有搭建，所以显示登陆失败那些

分手后的思念是犯贱/ 2022年11月11日 05:23/ 0 赞/ 167 阅读

相关 bootstrap页面左侧导航栏右侧网页

我们在浏览网页的时候，左侧导航栏，右侧网页的页面很常见，那么你有好奇过那些炫酷好看的页面是怎么做的吗？下面小编带你了解一下这种页面是怎么做的。

浅浅的花香味﹌/ 2022年06月03日 03:53/ 0 赞/ 243 阅读

相关使用网页嵌套iframe标签，点击左侧导航栏，在右侧动态显示页面的信息

<div class="main">  <div class="main_le

Dear 丶/ 2022年04月17日 06:39/ 0 赞/ 388 阅读