最近想使用layui框架作為畢業設計的前端頁面，先在layui官網上下載原始碼包（步驟省略） 打開layui官網，用的是免費的一套后臺布局：
把頁面原始碼下載下來部署到自己專案上:
那么怎么實作頁面的內部跳轉呢？（黑色部分不變，點擊相應按鈕，白色區域改變）
首先把下面復制到布局的內容主體區域上：
<iframe id="iframeMain" src="" style="width: 100%"; height="100%";></iframe>
匯入jquery（這里用jq實作，也可以用內置的jquery或者原生js）：
<script src="https://bbs.csdn.net/js/jquery-3.3.1.js"></script>
在jq方法體寫邏輯：
//模擬單頁跳轉
$(document).ready(function(){
$("dd>a").click(function (e) {
e.preventDefault();
$("iframeMain").attr("src",$(this).attr("href"));
});
});
邏輯：通過jq拿a的href值放到iframe的src屬性上
解釋：
e.preventDefault();：設定a的點擊事件不跳轉到另一個頁面
$("iframeMain").attr("src",$(this).attr("href"));：給iframe添加src屬性，值為a的href值
演示：例如給串列一加上“tatle.html：
”layui的使用詳細可以參考官網：https://www.layui.com/
內容主體區域：
點擊串列一：
則實作頁面內部跳轉，（注意后臺未寫介面，所以顯示請求例外）
以后根據需要添加模塊可以直接寫在a標簽的href上。
結語：這是實作頁面內部跳轉的一個方法（前端大佬清無視），也可以用前端路由框架，本人小白，以后一起加油!
uj5u.com熱心網友回復：
好，學習了。如果是我的話，可能會用到<a href="https://bbs.csdn.net/topics/sss" target="framename"></a>uj5u.com熱心網友回復：
如果是我的話，可能會用到<base target="framename" />uj5u.com熱心網友回復：
js判斷比直接target要優雅許多，寫的非常好，思路很清晰uj5u.com熱心網友回復：
給的代碼有些有瑕疵 $("iframeMain").attr("src",$(this).attr("href"));：應是 $("#iframeMain").attr("src",$(this).attr("href"));：
uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
如果跳轉jsp頁面就不可以了uj5u.com熱心網友回復：
為什么我的只會創建新的視窗uj5u.com熱心網友回復：
兄弟你選擇器少個 # 或者元素選擇器用 iframeuj5u.com熱心網友回復：
很棒棒哦！！！uj5u.com熱心網友回復：
這個東西其實用router 也就是路由來做 非常簡單 需要改變的位置放上<router-view />直接搞定轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/32049.html
標籤：JavaScript