针对使用网页嵌套<iframe>标签，点击左侧导航栏，在右侧动态显示页面的信息 - 码上欢乐

相关内容简体繁体

针对使用网页嵌套标签，点击左侧导航栏，在右侧动态显示页面的信息</a></h3> </center> <div class="postinfo"> 本文转载自 <i class="icon-globe"></i> <a href="/go/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20veHNsendtL3AvOTcyMjA3OS5odG1s" target="_blank">查看原文</a> <i class="icon-time"></i> <span>2018-09-29 09:47</span> <i class="icon-eye-open"></i> <span>1634 </span> <i class="icon-tag"></i>  <span><a href='/tag/知识储备' target="_blank">知识储备</a></span> <i class="icon-star" title="2.4149"></i> <i class="icon-star" title="2.4149"></i> </div> <hr/> <div class="media-body" id="content_div"> <div class="title_down_ad ad"> </div> <div class="post_content" id="postContent"> <p>先给一串代码模板瞅瞅：</p> <div class="cnblogs_code"> <pre><span style="color: #008000;"></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span> <span style="color: #008000;"></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main_left"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="li_title"</span><span style="color: #0000ff;">></span>用户管理<span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="down"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">data-src</span><span style="color: #0000ff;">="userAdmin.action"</span><span style="color: #0000ff;">></span>管理员<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">data-src</span><span style="color: #0000ff;">="roleList.action"</span><span style="color: #0000ff;">></span>角色管理<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">data-src</span><span style="color: #0000ff;">="userVip.action"</span><span style="color: #0000ff;">></span>会员<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="li_title"</span><span style="color: #0000ff;">></span>产品管理<span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="down"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">span</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">data-src</span><span style="color: #0000ff;">="videosList.action"</span><span style="color: #0000ff;">></span>视频查看<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">data-src</span><span style="color: #0000ff;">="videosUpload.action"</span><span style="color: #0000ff;">></span>视频上传<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #008000;"></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main_right"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">iframe </span><span style="color: #ff0000;">frameborder</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> scrolling</span><span style="color: #0000ff;">="yes"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="width:100%;height:100%"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">=""</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="aa"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">iframe</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></pre> </div> <p>重点部分来了，那如何当点击左侧导航如：管理员，角色管理，会员等这些，就会在右侧部分动态展示页面信息（其他部分不变呢），这里贴上js代码</p> <div class="cnblogs_code"> <pre><span style="color: #000000;">$(function(){ $(".main_left li").on("click",function(){ var address =$(this).attr("data-src"); $("iframe").attr("src",address); }); });</span></pre> </div> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4353345653789615" data-ad-slot="4890554435"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> <p>到这里就结束了，当点击左侧指示列表，右侧刷新指示内容。堪称完美。<br>Over！！</p> </div> <div class="read-more" id="read-more" style="display:none"></div> <div class="alert alert-info" style="margin-top:20px;"> <p id="tips_top1"> </p> </div> <script type="text/javascript">  </script> <div class="iframe-container"> </div> </div> <div class="ad_content_down ad"> </div> </div> <div class="disclaimer visible-desktop"> <br/> <div class="alert alert-block"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>免责声明！</h4> <p>本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。</p> </div> <br/><br/> </div> </div>  <div class="span4 left_content"> <div id="left_list_div" class="left_content"> <span class="list-group-item" href="javascript:void(0)"><i class="icon-filter"></i><strong>猜您在找</strong></span> <a class='list-group-item' href="/blog/f3b7881.html" title="网页嵌套iframe标签，点击左侧导航菜单，在右侧动态显示页面"> <i class="icon-file"></i> 网页嵌套iframe标签，点击左侧导航菜单，在右侧动态显示页面 </a> <a class='list-group-item' href="/blog/c739a71.html" title="xadmin 左侧导航栏点击页面不刷新"> <i class="icon-file"></i> xadmin 左侧导航栏点击页面不刷新 </a> <a class='list-group-item' href="/blog/64b5a71.html" title="左侧点击后右侧添加tab标签栏以及内容"> <i class="icon-file"></i> 左侧点击后右侧添加tab标签栏以及内容 </a> <a class='list-group-item' href="/blog/b24dcc1.html" title="iframe标签（页面嵌套）"> <i class="icon-file"></i> iframe标签（页面嵌套） </a> <a class='list-group-item' href="/blog/4799c71.html" title="div动态显示iframe内容"> <i class="icon-file"></i> div动态显示iframe内容 </a> <a class='list-group-item' href="/blog/40e0f61.html" title="网页html结构右侧栏固定，左侧自适应大小。"> <i class="icon-file"></i> 网页html结构右侧栏固定，左侧自适应大小。 </a> <a class='list-group-item' href="/blog/71ca321.html" title="Android4.2.2 动态显示隐藏屏幕底部的导航栏（对系统源码进行修改）"> <i class="icon-file"></i> Android4.2.2 动态显示隐藏屏幕底部的导航栏（对系统源码进行修改） </a> <a class='list-group-item' href="/blog/f466c71.html" title="uniapp(vue)实现点击左侧菜单，右侧显示对应的内容"> <i class="icon-file"></i> uniapp(vue)实现点击左侧菜单，右侧显示对应的内容 </a> <a class='list-group-item' href="/blog/62df201.html" title="右侧固定导航栏"> <i class="icon-file"></i> 右侧固定导航栏 </a> <a class='list-group-item' href="/blog/607d3c1.html" title="HTML实用案例（1）—— 左侧菜单，右侧内容的布局（带左侧菜单点击隐藏显示效果）"> <i class="icon-file"></i> HTML实用案例（1）—— 左侧菜单，右侧内容的布局（带左侧菜单点击隐藏显示效果） </a> <div id="right_float_ad" class="ad"> </div> </div> </div> </div> </div> <div class="clear"> </div> <div class="fbar" style="z-index:100"> <div class="span7" style="color:grey;font-size:12px;"> </div> <div class="pull-right"> <span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备18138465号</a>  </span><span>© 2018-2025 CODEPRJ.COM </span> </div> </div> <script src="/js/code.js?version=20250618"></script> <script> function buffer(a, b, c) { var d; return function() { if (d) return; d = setTimeout(function() { a.call(this), d = undefined }, b) } } (function() { function e() { var d = document.body.scrollTop || document.documentElement.scrollTop; d > b ? (a.className = "div1 div2", c && (a.style.top = d - b + "px")) : a.className = "div1" } var a = document.getElementById("float"); if (a == undefined) return ! 1; var b = 0, c, d = a; while (d) b += d.offsetTop, d = d.offsetParent; c = window.ActiveXObject && !window.XMLHttpRequest; if (!c || !0) window.onscroll = buffer(e, 50, this) })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?85c5e8e7b6167edfc87cb0607142e870"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>