用div+css代替iframe

实现效果：左侧栏点击，右侧页面显示，左边不刷新，只刷新右边页面，要求：不用frameset、iframe等一系列东西，状况：有很多个页面，将页面元素用js打印，不太现实，... 实现效果：左侧栏点击，右侧页面显示，左边不刷新，只刷新右边页面，
要求：不用frameset、iframe等一系列东西，
状况：有很多个页面，将页面元素用js打印，不太现实，
望能给出个demo 详细一点！！！
左侧栏是查询数据库得到的，我这样做的目的就是每次点击左侧栏，右侧内容切换，这个过程左侧栏不需要再次查询数据库。展开

 我来答

6个回答

#热议# 什么是淋病？哪些行为会感染淋病？

shala_zhen
2013-09-16 · TA获得超过275个赞

知道答主

回答量：69

采纳率：0%

帮助的人：15.4万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标点击左侧，右侧显示内容</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function (){
$("#newsTab a").each(function(index){//each变例，每一个a标签
$(this).click(function(){//鼠标滑过a的时候
$(".news").addClass("dis")//给news添加样式dis
$(".news:eq("+index+")").removeClass("dis")//给对应news的index索引值删除dis样式
$("#newsTab a").removeClass("hover")//先删除所有的a的样式hover
$(this).addClass("hover")//给对应的a添加样式hover
})
})
})
</script>
<style type="text/css">
*{padding:0;margin:0;}
li{ list-style-type:none;}
.box{ width:1000px; height:500px; border:1px solid #333; margin:0 auto;}
#newsTab{width:200px; height:500px; border-right:1px solid #333; float:left;}
#newsTab li{ width:200px;}
#newsTab a{ width:200px; height:28px; line-height:28px; text-decoration:none; color:#fff; background:#ccc; border-bottom:1px solid #777; display:inline-block; text-align:center;}
.news{width:799px;height:500px;background:#ccc; float:left}
.dis{display:none;}
#newsTab .hover{background:red;font-weight:600;}
</style>
</head>
<body>
<div class="box">
<ul id="newsTab">
<li><a href="#" class="hover">国内新闻</a></li>
<li><a href="#">娱乐新闻</a></li>
<li><a href="#">体育新闻</a></li>
</ul>
<ul class="news" >
<li>国内昨天下公交车的时候，捡到5块，回到家发现公交卡丢（刚充了100）</li>
</ul>
<ul class="news dis">
<li>早上被雨淋了</li>
</ul>
<ul class="news dis">
<li>北京3-1领先广东队</li>
</ul>
</div>
</body>
</html>

更多追问追答
追问

你先设置那个隐藏，点击在显示，可这样的话，我岂不是要把所有的页面都隐藏在主页（导航）面里了？  貌似不行！！！
追答

如果不想隐藏，你可以每个tab写一个页面，然后点击tab切换页面就行了，这样还不用js代码
追问

新手！不明白，还望赐教！
追答
看附件

追问

可是这样的话，就违背了初衷了，我左侧栏是查询出来的，问这个问题的目的就是减少页面的ajax请求，不用每次都查询左侧栏，如果跳转页面，是不是每次跳转都要查左侧栏的内容？这样的效果不是我想要的！
追答

不好意思，能力不够，解决不了。
追问

依然谢谢你这么耐心的讲解！

已赞过 已踩过<

评论收起

Victoriness
推荐于2017-09-08 · TA获得超过707个赞

知道答主

回答量：97

采纳率：0%

帮助的人：84.9万

我也去答题访问个人页

关注

展开全部

我理解了一下，不知道对不对：左侧菜单不刷新，右侧刷新，减少左侧菜单请求数量。
$("#menu a").click(function(){ //点击左侧菜单
$("#main").load('inner.html'); //刷新右侧main区域
});
jquery的load方法可以load一个页面到div里。应该可以满足你的要求吧。

追问

请问，那如果我还要传参呢？就是说点击左侧，右侧刷新的页面需要左侧数据为查询条件，呵呵好像有点苛刻了！

本回答被提问者和网友采纳

已赞过 已踩过<

评论收起

puckpark
2013-09-16

知道答主

回答量：8

采纳率：0%

帮助的人：1.1万

我也去答题访问个人页

关注

展开全部

你说的是局部刷新的话，用Ajax就可以了，稍微学习一下js就会做了，显示方面都是用html＋css布局，需要局部刷新的内容也是一样，最后用js来控制下刷新就可以了

追问

也可以说是局部刷新，但是刷新的内容是一个页面，绝不是用js写的字符串，往页面上打印那种，

已赞过 已踩过<

评论收起

淡然且缤纷丶好汉v
2016-01-14 · TA获得超过6128个赞

知道大有可为答主

回答量：1241

采纳率：88%

帮助的人：572万

我也去答题访问个人页

关注

展开全部

frameset 已经过时, 使用frameset会带来很多问题,比如session丢失等.
所以提倡用iframe。下面是一个不错的网站布局的。

1. Main.htm页面代码

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>后台管理系统</title>
<link
href="Styles/frame.css"
rel="Stylesheet"
type="text/css"
/>
<link
href="Styles/menu.css"
rel="Stylesheet"
type="text/css"
/>
<style
type="text/css">
body
{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
</style>
<script
language="javascript"
type="text/javascript">
function SetWinHeight(obj)
{
var win=obj;
if (document.getElementByIdx_x)
{
if (win && !window.opera)
{
if (win.contentDocument &&
win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document &&
win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
</script>
</head>
<body>
<form id="form1"
runat="server">
<div
id="framecontentLeft">
<div
class="menu">
<ul>
<li><a
href="CategoryList.htm"
target="content">产品类别</a></li>
<li><a
href="ProductList.htm"
target="content">产品明细</a></li>
</ul>
</div>
</div>
<div
id="framecontentTop">
<div style="text-align:
center;">
<div style="float:
right;">
<a
href="Default.aspx?act=logout">退出</a>
</div>
<h1>
后台管理系统
</h1>
</div>
</div>
<div
id="maincontent">
<iframe
id="content"
name="content"
onload="Javascript:SetWinHeight(this)"
frameborder="0"
scrolling="no"
width="100%"></iframe>
</div>
</form>
</body>
</html>

2. frame.css样式代码

#framecontentTop
{
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 100%;
overflow: hidden;
vertical-align: middle;
background-color: #D2E6FA;
}
#framecontentLeft
{
position: fixed;
top: 100px;
left: 0;
height: 100%;
width: 150px;
overflow: hidden;
vertical-align: top;
background-color: #D2E6FA;
}
#maincontent
{
position: fixed;
left: 150px;
top: 100px;
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
border-top: solid 2px #70cbea;
border-left: solid 2px #70cbea;
}
* html body
{
padding: 100px 0 0 150px;
}
* html #maincontent
{
height: 100%;
width: 100%;
}
* html #framecontentTop
{
width: 100%;
}

3. menu.css样式代码

.menus
{
}
.menu ul
{
padding: 0;
margin: 0;
list-style-type: none;
width: 100%;
}
.menu li
{
position: relative;
background: #d4d8bd;
height: 26px;
}
.menu a, .menu a:visited
{
display: block;
text-decoration: none;
height: 25px;
line-height: 25px;
width: 149px;
color: #000;
text-indent: 5px;
border: 1px solid #fff;
border-width: 0 1px 1px 0;
}
.menu a:hover
{
color: #fff;
background: #949e7c;
}

4. CategoryList.htm页面代码（根据自己需要输入）

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>类别列表</title>
</head>
<body>
<div>
<table>
<tr>
<td>类别</td>
<td>类别</td>
<td>类别</td>
<tr>
<tr>
<td>类别</td>
<td>类别</td>
<td>类别</td>
<tr>
<tr>
<td>类别</td>
<td>类别</td>
<td>类别</td>
<tr>
</table>
</div>
</body>
</html>

5. ProductList.htm页面代码（根据自己需要输入）：

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>类别列表</title>
</head>
<body>
<div>
<table
style="height:500px;">
<tr>
<td>产品</td>
<td>产品</td>
<td>产品</td>
<tr>
<tr>
<td>产品</td>
<td>产品</td>
<td>产品</td>
<tr>
<tr>
<td>产品</td>
<td>产品</td>
<td>产品</td>
<tr>
</table>
<table
style="height:500px;">
<tr>
<td>产品</td>
<td>产品</td>
<td>产品</td>
<tr>
<tr>
<td>产品</td>
<td>产品</td>
<td>产品</td>
<tr>
<tr>
<td>产品</td>
<td>产品</td>
<td>产品</td>
<tr>
</table>
</div>
</body>
</html>

上面将页面元素拆分成html和css，运行的效果如图：

已赞过 已踩过<

评论收起

恒优态
2015-12-14 · TA获得超过1501个赞

知道大有可为答主

回答量：1693

采纳率：0%

帮助的人：660万

我也去答题访问个人页

关注

展开全部

不能代替。
第一，DIV+CSS 虽然功能非常强大，布局也非常灵活，但是iframe 有其优势。
第二，需要制作后台框架的时候，iframe 相对来说会是更好的选择。
第三，可访问：http://www.w3school.com.cn/html/html_iframe.asp 进行更多学习。

已赞过 已踩过<

评论收起

更多回答（4）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

用div+css代替iframe

其他类似问题

为你推荐：