碼上快樂
1秒登錄
首頁
榜單
標簽
關於
搜索
相關內容
簡體
繁體
針對使用網頁嵌套
標簽，點擊左側導航欄，在右側動態顯示頁面的信息</a></h3> </center> <div class="postinfo"> 本文轉載自 <i class="icon-globe"></i>&nbsp;<a href="/go/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20veHNsendtL3AvOTcyMjA3OS5odG1s" target="_blank">查看原文</a> <i class="icon-time"></i>&nbsp;<span>2018-09-29 09:47</span> <i class="icon-eye-open"></i>&nbsp;<span>1634&nbsp;</span> <i class="icon-tag"></i>&nbsp; <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;">&lt;!--</span><span style="color: #008000;">主體內容部分</span><span style="color: #008000;">--&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> 左側導航 </span><span style="color: #008000;">--&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main_left"</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="li_title"</span><span style="color: #0000ff;">&gt;</span>用戶管理<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="down"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</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;">&gt;</span>管理員<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</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;">&gt;</span>角色管理<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</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;">&gt;</span>會員<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="li_title"</span><span style="color: #0000ff;">&gt;</span>產品管理<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="down"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</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;">&gt;</span>視頻查看<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</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;">&gt;</span>視頻上傳<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span> <span style="color: #008000;">&lt;!--</span><span style="color: #008000;"> 右側內容 </span><span style="color: #008000;">--&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="main_right"</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</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;">&gt;&lt;/</span><span style="color: #800000;">iframe</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</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"> $("#tips_top1").append("<strong><i class=\"icon-fire\"></i>溫馨提示：</strong>如果本文未解決您的問題，可以免費向大模型提問：<strong><a href='javascript:void(0)' class='gptbtn'>向AI大模型提問</a></strong>。"); </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/d5dcc51.html" title="layuimini 點擊左側導航欄，刷新iframe頁面"> <i class="icon-fire"></i> layuimini 點擊左側導航欄，刷新iframe頁面 </a> <a class='list-group-item' href="/blog/7174111.html" title="iframe 點擊左側導航列表 右側出現對應界面"> <i class="icon-fire"></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/509e201.html" title="左側導航欄顯示隱藏toggle使用"> <i class="icon-file"></i> 左側導航欄顯示隱藏toggle使用 </a> <a class='list-group-item' href="/blog/e3b1791.html" title="uniapp動態顯示/隱藏導航欄返回按鈕"> <i class="icon-file"></i> uniapp動態顯示/隱藏導航欄返回按鈕 </a> <a class='list-group-item' href="/blog/a493bd1.html" title="web實現點擊左側導航，右側加載不同的網頁（這種布局多用於后台管理系統）"> <i class="icon-fire"></i> web實現點擊左側導航，右側加載不同的網頁（這種布局多用於后台管理系統） </a> <a class='list-group-item' href="/blog/58288c1.html" title="關於使用iframe嵌套頁面的跳轉方式"> <i class="icon-fire"></i> 關於使用iframe嵌套頁面的跳轉方式 </a> <a class='list-group-item' href="/blog/9420861.html" title="vue搭建后台管理頁面（點擊左側導航，切換右側內容）"> <i class="icon-fire"></i> vue搭建后台管理頁面（點擊左側導航，切換右側內容） </a> <div id="right_float_ad" class="ad"> </div> </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=20250515"></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>
