碼上歡樂
首頁
榜單
標簽
關於
搜索
文章詳情
原文：針對使用網頁嵌套
標簽，點擊左側導航欄，在右側動態顯示頁面的信息</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">&nbsp;</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>&nbsp;&nbsp;</span><span>&copy; 2018-2025 CODEPRJ.COM </span> </div> </div> <script src="/js/code.js?version=20251014"></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?c81b3b98809d882ddda9a802d3778cf4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>
