码上欢乐
首页
榜单
标签
关于
搜索
文章详情
原文：针对使用网页嵌套
标签，点击左侧导航栏，在右侧动态显示页面的信息</a></h3> <p>先给一串代码模板瞅瞅： 重点部分来了，那如何当点击左侧导航如：管理员，角色管理，会员等这些，就会在右侧部分动态展示页面信息 其他部分不变呢 ，这里贴上js代码 到这里就结束了，当点击左侧指示列表，右侧刷新指示内容。堪称完美。Over ...</p> <p> <i class="icon-time"></i> <span>2018-09-29 09:47</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>1634</span> 推荐指数： <i class="icon-star" title="2.4149"></i> <i class="icon-star" title="2.4149"></i> </p> <p><a class="btn btn-warning btn-primary" href="/blog/9458df1.html">查看详情</a></p> </div> <div class="page-header"><h3><small><i class="icon-list"></i>相关推荐</small></h3></div> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/f3b7881.html" target="_blank"><B>网页</B><B>嵌套</B><B>iframe</B><B>标签</B>，<B>点击</B><B>左侧</B><B>导航</B>菜单，在<B>右侧</B><B>动态显示</B><B>页面</B></a> <p class="post-item-summary"> 功能描述：在后台开发的时候往往遇到这种功能，<B>点击</B><B>左侧</B>的<B>导航</B>菜单，在<B>右侧</B><B>动态</B><B>iframe</B><B>显示</B><B>页面</B>内容， 知识点：<B>iframe</B> 名称：<B>iframe</B><B>嵌套</B> 解决方案2种：1.js解决 2.a<B>标签</B>target属性 解决方案一：js方案 js代码 ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Sun Mar 06 23:15:00 CST 2022</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>654</span> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/d5dcc51.html" target="_blank">layuimini <B>点击</B><B>左侧</B><B>导航</B><B>栏</B>，刷新<B>iframe</B><B>页面</B></a> <p class="post-item-summary"> 刷新<B>iframe</B><B>页面</B> 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接： https://blog.csdn.net/qq_38949960/article/details/89181380 ------------------------------------------------- ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Sat Nov 21 22:55:00 CST 2020</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>2402</span> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/7174111.html" target="_blank"><B>iframe</B> <B>点击</B><B>左侧</B><B>导航</B>列表 <B>右侧</B>出现对应界面</a> <p class="post-item-summary"> HTML 代码结构如下： 打开上面 HTML 结构的<B>页面</B>，<B>iframe</B> 打开的是默认<B>页面</B> （bbb.html），这个<B>页面</B>个人可自己搭建，然后<B>点击</B><B>左侧</B>列表（没有加样式，列表实际是在上面），<B>iframe</B> <B>标签</B>内是对应的<B>页面</B>，即可实现<B>点击</B><B>左侧</B>列表，实现<B>右侧</B>出现对应<B>页面的</B>内容 ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Sat Aug 26 22:32:00 CST 2017</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>9530</span> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/c739a71.html" target="_blank">xadmin <B>左侧</B><B>导航</B><B>栏</B><B>点击</B><B>页面</B>不刷新</a> <p class="post-item-summary"> 添加一下代码 打开xadmin.js文件，添加以上代码到具体问位置。 ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Sun Jun 07 05:02:00 CST 2020</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>554</span> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/64b5a71.html" target="_blank"><B>左侧</B><B>点击</B>后<B>右侧</B>添加tab<B>标签栏</B>以及内容</a> <p class="post-item-summary"> css代码 js代码 效果图： ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Wed Mar 22 23:17:00 CST 2017</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>2783</span> <i class="icon-star"></i> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/509e201.html" target="_blank"><B>左侧</B><B>导航</B><B>栏</B><B>显示</B>隐藏toggle<B>使用</B></a> <p class="post-item-summary"> toggle, jquery1.8 and 2.1(error) $(document).ready(function(){ $("button").toggle(function ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Wed Mar 16 22:14:00 CST 2016</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>3385</span> <i class="icon-star"></i> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/e3b1791.html" target="_blank">uniapp<B>动态显示</B>/隐藏<B>导航</B><B>栏</B>返回按钮</a> <p class="post-item-summary"> View Code 快捷翻译 - 快到离谱！ ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Wed Jun 23 19:47:00 CST 2021</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>482</span> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> </footer> </div> </article> <article class="post-item" style="border-bottom:1px dotted #f2f2f2;padding-bottom:10px;"> <div class="post-item-body"> <div class="post-item-text"> <a class="post-item-title" href="/blog/a493bd1.html" target="_blank">web实现<B>点击</B><B>左侧</B><B>导航</B>，<B>右侧</B>加载不同的<B>网页</B>（这种布局多用于后台管理系统）</a> <p class="post-item-summary"> （1）实现方法：采用ajax实现<B>点击</B><B>左侧</B>菜单，<B>右侧</B>加载不同<B>网页</B>（在整个<B>页面</B>无刷新的情况下实现<B>右侧</B>局部刷新，用到ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可） （2）原理：ajax的局部刷新原理：通过.load()重新加载<B>页面</B>中的某一部分，巧妙的借助 ... </p> </div> <footer class="post-item-foot"> <i class="icon-time"></i> <span>Tue May 07 02:31:00 CST 2019</span> <i class="icon-envelope"></i> <span>0</span> <i class="icon-eye-open"></i> <span>2643</span> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> </footer> </div> </article> </div> </div> <div class="span4 left_content"> <div class="page-header"><h3><small><i class="icon-tag"></i>相关标签</small></h3></div> <ul class="nav nav-pills"> <li class="tag-item"><a class="btn-link" href='/tag/vue' target="_blank">vue(3762)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/python' target="_blank">python(3712)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/java' target="_blank">java(3637)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/Java' target="_blank">Java(3499)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/Linux' target="_blank">Linux(3223)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/Python' target="_blank">Python(3096)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/C＃' target="_blank">C#(3063)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/linux' target="_blank">linux(2376)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/Android' target="_blank">Android(2333)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/JavaScript' target="_blank">JavaScript(2301)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/前端' target="_blank">前端(2081)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/javascript' target="_blank">javascript(1966)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/Vue' target="_blank">Vue(1843)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/js' target="_blank">js(1824)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/PHP' target="_blank">PHP(1236)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/android' target="_blank">android(1194)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/数据库' target="_blank">数据库(1072)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/php' target="_blank">php(1027)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/css' target="_blank">css(995)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/C＋＋' target="_blank">C++(966)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/mysql' target="_blank">mysql(917)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/微信小程序' target="_blank">微信小程序(909)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/html' target="_blank">html(886)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/HTML' target="_blank">HTML(883)</a></li> <li class="tag-item"><a class="btn-link" href='/tag/JAVA' target="_blank">JAVA(827)</a></li> </ul> <div id="right_float_ad" class="ad"> </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=20250625"></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>
