ifram 實現左側選單,右側顯示內容
阿新 • • 發佈:2018-12-26
一般都是左側的導航欄中的a標籤中寫一個target(a標籤有target屬性),
右側的div標籤中寫一個iframe,在iframe中有name的屬性,在左側a標籤中的target寫上iframe中name的屬性值。具體操作如下:
1、設定選單(a標籤增加target屬性,值填寫iframe的name值)
<li class="layui-nav-item"><a href="/about" target="menuFrame">瞭解itggek</a></li>
1、增加一個iframe(自定義name),用來展示每個選單的內容
th:src="@{/about}":是為了預設展示一個頁面內容
<!-- 內容主體區域 --> <div class="layui-body"> <iframe id="menuFrame" name="menuFrame" th:src="@{/about}" style="overflow: visible;" scrolling="yes" frameborder="no" width="100%" height="100%"> </iframe> </div>
3、系統截圖:(點選瞭解itgeek就會將內容展示在右側空白的iframe中)
可以直接進入系統,就預設展示一個頁面:在iframe中src增加請求地址(非web專案,直接填寫檔案地址)