最近在學習Layui的過程中,遇到了內部iframe在點擊側邊欄之后無法跳轉的情況,故記錄此解決方案以做備忘,防止下次再有這樣的事情發生。
頁面想點擊左邊和上面的側邊欄,然后只在右邊的主體白色部分進行頁面的轉變。
首先把下面復制到布局的內容主體區域上:
<iframe id="iframeMain" src="" style="width: 100%"; height="100%";></iframe>
導入jquery(這里用官網jq實現,也可以用內置的jquery或者原生js):<
script
src
=
"https://code.jquery.com/jquery-3.3.1.min.js"
></
script
>
在jq方法體寫邏輯:
//模擬單頁跳轉
<script>
$(document).ready(function(){
$("dd>a").click(function (e) {
e.preventDefault();
$("#iframeMain").attr("src",$(this).attr("href"));
});
});
</script>
邏輯:通過jq拿a的href值放到iframe的src屬性上
解釋:
e.preventDefault();:設置a的點擊事件不跳轉到另一個頁面
$("iframeMain").attr("src",$(this).attr("href"));:給iframe添加src屬性,值為a的href值
側邊欄設置跳轉鏈接像是這樣,設置 dd 格式類同"顯示表單"與“news”.
頭部欄設置跳轉鏈接像是這樣,設置 li 格式類同“用戶”。
iframe設置id,格式類同上圖。
script設置 li 與 dd 的格式
設置后跳轉就只在右側主體界面顯示而不改變其他設置。