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

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

JavaScript

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

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

查看完整描述

2 回答

已采納

小王子抓貓咪

TA貢獻9條經(jīng)驗獲得超7個贊

這個東西不是應(yīng)該用HTML結(jié)構(gòu)和CSS樣式來寫嗎，跟JS沒有一點關(guān)系。

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

具體代碼

<html>
????<head>?
????</head>
????<body?class="clearfix">
????????<!--nav就是左側(cè)的導航-->
????????<nav?class="nav">
????????????<li>nav1</li>
????????????<li>nav2</li>
????????????<li>nav3</li>
????????</nav>
????????<!--container就是右側(cè)的網(wǎng)頁內(nèi)容-->
????????<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;
}

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

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

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

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

反對回復(fù) 2016-09-10

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

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

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

回復(fù) 2017-05-20