首頁猿問怎么用JavaScript來實現(xiàn)...

怎么用JavaScript來實現(xiàn) iframe效果

JavaScript

慕前端9656150 2016-09-10 20:28:08

怎么用javascript 實現(xiàn) 像OA后臺那樣點擊左邊導航，右邊區(qū)域顯示不同的網頁，就像iframe一樣。

查看完整描述

2 回答

已采納

小王子抓貓咪

TA貢獻9條經驗獲得超7個贊

這個東西不是應該用HTML結構和CSS樣式來寫嗎，跟JS沒有一點關系。

你如果不想用iframe，就考慮用html+css來實現(xiàn)

具體代碼

<html>
????<head>?
????</head>
????<body?class="clearfix">
????????<!--nav就是左側的導航-->
????????<nav?class="nav">
????????????<li>nav1</li>
????????????<li>nav2</li>
????????????<li>nav3</li>
????????</nav>
????????<!--container就是右側的網頁內容-->
????????<div?class="container">
????????</div>
????</body>
</html>

.clearfix{
????zoom:?1;
}
.clearfix:after{
????content:?"";
????display:?table;
????clear:?both;
}
.nav{
????float:left;
????width:?30%;
????background-color:?red;
}
.container{
????float:?left;
????width:?70%;
????background-color:?green;
}

你說想要的只是一個兩欄布局

與之類似的還有頂，左，右或者左中右三欄布局等等

你可以多去大神們的博客看看，或者慕課里就有簡單的網頁布局講解課程。

希望采納我的答案，純手寫。

反對回復 2016-09-10

慕前端9656150
我要的不是CSS布局，我想要功能實現(xiàn)的方法，不用js 也可以，就像平常網頁郵箱或網頁后臺那樣，點擊導航里的項，實現(xiàn)右邊內容區(qū)域不同網頁的顯示類似 iframe 那樣。

回復 2016-09-11
小王子抓貓咪
你想要的是一個tab選項卡是嗎，左側導航有三項，每一項點擊后右側就會出現(xiàn)對應項目的內容是嗎。這樣的效果可以用Js也可以用css來實現(xiàn)，iframe也并不能實現(xiàn)你想要的功能。看你的提問，我覺得你應該不了解單頁面應用或者是頁面路由功能。復雜的我們先不說。最簡單的實現(xiàn)方式就是通過不同的div切換來實現(xiàn)，不知道慕課網上的一些講解菜單，下拉菜單等課程你有沒有仔細看過。原理都很類似。最簡單的一種就是右側的container這個div容器，你在里面定義好幾個不同的子div。分別代表不同的導航對應的內容。將所有這些子div設置width:100%, height:100% position:absolute left:0 top:0 opacity:0 通過左側導航按鈕的點擊來找到對應的div并且設置該div的opacity:1可以實現(xiàn)這種切換功能。

回復 2016-09-11
吃瓜小夏
回復慕大神仙樓主說的應該是后臺管理系統(tǒng) 左側導航欄右側表單不用iframe用什么

回復 2017-05-20