用div+css代替iframe
实现效果：左侧栏点击，右侧页面显示，左边不刷新，只刷新右边页面，要求：不用frameset、iframe等一系列东西，状况：有很多个页面，将页面元素用js打印，不太现实，...
实现效果：左侧栏点击，右侧页面显示，左边不刷新，只刷新右边页面，
要求：不用frameset、iframe等一系列东西，
状况：有很多个页面，将页面元素用js打印，不太现实，
望能给出个demo 详细一点！！！
左侧栏是查询数据库得到的，我这样做的目的就是每次点击左侧栏，右侧内容切换，这个过程左侧栏不需要再次查询数据库。 展开
要求：不用frameset、iframe等一系列东西，
状况：有很多个页面，将页面元素用js打印，不太现实，
望能给出个demo 详细一点！！！
左侧栏是查询数据库得到的，我这样做的目的就是每次点击左侧栏，右侧内容切换，这个过程左侧栏不需要再次查询数据库。 展开
6个回答
展开全部
<!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>
<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代码
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我理解了一下，不知道对不对：左侧菜单不刷新，右侧刷新，减少左侧菜单请求数量。
$("#menu a").click(function(){ //点击左侧菜单
$("#main").load('inner.html'); //刷新右枯敏侧main区域
});
jquery的load方法可以load一个页面派败慧到div里尘答。应该可以满足你的要求吧。
$("#menu a").click(function(){ //点击左侧菜单
$("#main").load('inner.html'); //刷新右枯敏侧main区域
});
jquery的load方法可以load一个页面派败慧到div里尘答。应该可以满足你的要求吧。
追问
请问，那如果我还要传参呢？就是说点击左侧，右侧刷新的页面需要左侧数据为查询条件，呵呵好像有点苛刻了！
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你说的是局模宴唯部刷新的话，用Ajax就可以了，稍微学习一下js就会做了，显示方面都是用html＋css布局，需要局部刷新的内容也旦培是一样，最后用js来控制祥衡下刷新就可以了
追问
也可以说是局部刷新，但是刷新的内容是一个页面，绝不是用js写的字符串，往页面上打印那种，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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，运行的效果如图：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不能代替。
第一，DIV+CSS 虽然功能非常强大，布局也非常灵春迹活，但是iframe 有其优势。
第二，需要制作后台框架的时候，iframe 相对来说会是更好的选孝森裂择。
第三，可访问：http://www.w3school.com.cn/html/html_iframe.asp 进行巧闭更多学习。
第一，DIV+CSS 虽然功能非常强大，布局也非常灵春迹活，但是iframe 有其优势。
第二，需要制作后台框架的时候，iframe 相对来说会是更好的选孝森裂择。
第三，可访问：http://www.w3school.com.cn/html/html_iframe.asp 进行巧闭更多学习。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
