请问这种div+css网页这种效果是怎么实现的
一般网页上部有个导航，点击导航的链接，内容区内容发生改变。比如像qq空间好了，点击日志则出现日志，点击留言板，则出现留言板，但只是内容区发生改变，头部和导航都没有改变。。...
一般网页上部有个导航，点击导航的链接，内容区内容发生改变。比如像qq空间好了，点击日志则出现日志，点击留言板，则出现留言板，但只是内容区发生改变，头部和导航都没有改变。。。
这种我以前是直接用iframe实现的，点击后改变iframe的源文件。。但是我现在想用div+css布局，像这种布局方式内容区一般就是一个div。怎么动态改变这个div呢？
谁能告诉我div+css布局的这种功能是怎么实现的，本人菜鸟，问题问得不专业，不知道大神们可能听懂~~~
感谢网友热心的回答~~~~最近也在学用jquery
那请问11楼，怎么才能点击head导航，改变content的内容呢？？ 展开
这种我以前是直接用iframe实现的，点击后改变iframe的源文件。。但是我现在想用div+css布局，像这种布局方式内容区一般就是一个div。怎么动态改变这个div呢？
谁能告诉我div+css布局的这种功能是怎么实现的，本人菜鸟，问题问得不专业，不知道大神们可能听懂~~~
感谢网友热心的回答~~~~最近也在学用jquery
那请问11楼，怎么才能点击head导航，改变content的内容呢？？ 展开
12个回答
展开全部
这个是包进去的，以jsp为例：
比如：导航做一个head.jsp 内容做一个content.jsp 最下面是一个footer.jsp
然后：在<body>里面放入
<jsp:include page="head.jsp" flush="true"/>
<jsp:include page="content.jsp" flush="true"/>
<jsp:include page="footer.jsp" flush="true"/>
这样就包进去了。
如果你做另一个页面的话只需要更换conten.jsp就可以了。
head.jsp和footer.jsp是不会变的。你怎么点导航里的按钮只会变content里的内容。
这样的好处就是，只对head.jsp和footer.jsp做单独的样式。更改一个样式，全部网站的head.jsp样式都变了，多好，减轻了维护的负担。
当然还有就是你提到的，iframe。不过这个做动态网页的时候会比较麻烦。现在我们在做一个项目，是SSH框架的，做分页的时候，从这个iframe搜集信息会麻烦。
所以我觉得还是不要用iframe为好，除非特别需要。
比如：导航做一个head.jsp 内容做一个content.jsp 最下面是一个footer.jsp
然后：在<body>里面放入
<jsp:include page="head.jsp" flush="true"/>
<jsp:include page="content.jsp" flush="true"/>
<jsp:include page="footer.jsp" flush="true"/>
这样就包进去了。
如果你做另一个页面的话只需要更换conten.jsp就可以了。
head.jsp和footer.jsp是不会变的。你怎么点导航里的按钮只会变content里的内容。
这样的好处就是，只对head.jsp和footer.jsp做单独的样式。更改一个样式，全部网站的head.jsp样式都变了，多好，减轻了维护的负担。
当然还有就是你提到的，iframe。不过这个做动态网页的时候会比较麻烦。现在我们在做一个项目，是SSH框架的，做分页的时候，从这个iframe搜集信息会麻烦。
所以我觉得还是不要用iframe为好，除非特别需要。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你是不是想说用DIV+CSS来实现这种方式呢？ 很容易 直接先用DIV+CSS把 导航和头部给弄出来，在把网页保存为模板 在你想变换的区域 插入一个可编辑区域就行了 ，这样就能实现你说的上述的情况了！ 不用代码 在设计中就能完成的1
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你不晓得你是不是想要选项卡效果，下面是选项卡的效果，不过你说的有可能也是ajax技术，没太明白
<!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>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px;}
body{
padding:30px;
}
.tabsBox{ width:400px; margin:20px auto;}
.tabs{ height:20px;}
.tabs li{ width:80px; text-align:center; padding-top:2px; line-height:18px; float:left; background-color:#ccc; margin-right:5px; list-style:none; position:relative; cursor:pointer; color:#333;}
.tabs li span{ display:none;}
.tabs .cur{ background-color:#f0f0f0;}
.tabs .cur span{ display:block; width:1px; height:1px; border:solid 8px; border-color:#f0f0f0 #fff #fff #fff; position:absolute; top:20px; left:32px; overflow:hidden; z-index:-1;}
.cons{ height:120px; padding:8px 12px; overflow:hidden; border:1px solid #f0f0f0; position:relative; z-index:1;}
.cons ul li{ list-style:none; line-height:20px;}
.hidden{ display:none;}
.block{ display:block;}
</style>
</head>
<body>
<div class="tabsBox">
<ul id="Tabs" class="tabs">
<li class="cur">最新更新<span></span></li>
<li>推荐下载<span></span></li>
<li>下载排行<span></span></li>
<li>本月排行<span></span></li>
</ul>
<div id="TabsCon" class="cons">
<ul>
<li><a href="/soft/4764.shtml" target="_blank">基于JavaScript的气泡提示网页版</a></li><li><a href="/soft/8021.shtml" target="_blank">C#调用OFFICE组件生成Excel表格示例</a></li><li><a href="/soft/9011.shtml" target="_blank">iFrame 框架在多页面间相互传值的实例</a></li><li><a href="/soft/1658.shtml" target="_blank">高亮显示代码的在线编辑器ASP.NET版</a></li><li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li><li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银软件</a></li></ul>
<ul>
<li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银软件</a></li><li><a href="/soft/3855.shtml" target="_blank">VB 6.0 简体中文标准版</a></li><li><a href="/soft/8467.shtml" target="_blank">Delphi加密隐藏或还原Windows盘符驱动器</a></li><li><a href="/soft/5238.shtml" target="_blank">ImageVue 2.0 PHP+FLASH+XML高级相册</a></li><li><a href="/soft/7667.shtml" target="_blank">VB商品零售进销存程序含MSSQL数据库文件</a></li>
</ul>
<ul>
<li><a href="/jscss/code/1915.shtml" target="_blank">jQuery 模块拖动，拖动层效果，可淡入淡出</a></li><li><a href="/jscss/code/1914.shtml" target="_blank">jQuery单行新闻滚动</a></li><li><a href="/jscss/code/1913.shtml" target="_blank">经典的jQuery多行文本滚动</a></li><li><a href="/jscss/code/1912.shtml" target="_blank">JS图片切换学习版，没有过多修饰</a></li><li><a href="/jscss/code/1911.shtml" target="_blank">漂浮广告代码，Js演示</a></li><li><a href="/jscss/code/1910.shtml" target="_blank">边滚边停的JS图片滚动</a></li></ul>
<ul>
<li><a href="/soft/9217.shtml" target="_blank">递归读取数据库创建树控菜单的Delphi例子</a></li><li><a href="/soft/9199.shtml" target="_blank">VB抓取DLL或EXE应用程序内的图标资源</a></li><li><a href="/soft/9236.shtml" target="_blank">jQuery StartStopSlider 滚动切换插件</a></li><li><a href="/soft/9235.shtml" target="_blank">jQuery EasyUI 实例演示（菜单、TAB等）</a></li><li><a href="/soft/9227.shtml" target="_blank">VB+SQL2000考试卷（题库）生成与管理系统</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var lis = document.getElementById("Tabs").getElementsByTagName("li");
var uls = document.getElementById("TabsCon").getElementsByTagName("ul");
var order = 0;
for(var i=0; i<lis.length; i++){
lis[i].value = i;
lis[i].onclick = function(){
ChangeTabs(this.value);
};
uls[i].className = "hidden";
}
lis[order].className = "cur";
uls[order].className = "block";
function ChangeTabs(nowTab){
lis[order].className = "";
uls[order].className = "hidden";
order = nowTab
lis[nowTab].className = "cur";
uls[nowTab].className = "block";
}
</script>
</body>
</html>
<!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>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px;}
body{
padding:30px;
}
.tabsBox{ width:400px; margin:20px auto;}
.tabs{ height:20px;}
.tabs li{ width:80px; text-align:center; padding-top:2px; line-height:18px; float:left; background-color:#ccc; margin-right:5px; list-style:none; position:relative; cursor:pointer; color:#333;}
.tabs li span{ display:none;}
.tabs .cur{ background-color:#f0f0f0;}
.tabs .cur span{ display:block; width:1px; height:1px; border:solid 8px; border-color:#f0f0f0 #fff #fff #fff; position:absolute; top:20px; left:32px; overflow:hidden; z-index:-1;}
.cons{ height:120px; padding:8px 12px; overflow:hidden; border:1px solid #f0f0f0; position:relative; z-index:1;}
.cons ul li{ list-style:none; line-height:20px;}
.hidden{ display:none;}
.block{ display:block;}
</style>
</head>
<body>
<div class="tabsBox">
<ul id="Tabs" class="tabs">
<li class="cur">最新更新<span></span></li>
<li>推荐下载<span></span></li>
<li>下载排行<span></span></li>
<li>本月排行<span></span></li>
</ul>
<div id="TabsCon" class="cons">
<ul>
<li><a href="/soft/4764.shtml" target="_blank">基于JavaScript的气泡提示网页版</a></li><li><a href="/soft/8021.shtml" target="_blank">C#调用OFFICE组件生成Excel表格示例</a></li><li><a href="/soft/9011.shtml" target="_blank">iFrame 框架在多页面间相互传值的实例</a></li><li><a href="/soft/1658.shtml" target="_blank">高亮显示代码的在线编辑器ASP.NET版</a></li><li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li><li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银软件</a></li></ul>
<ul>
<li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银软件</a></li><li><a href="/soft/3855.shtml" target="_blank">VB 6.0 简体中文标准版</a></li><li><a href="/soft/8467.shtml" target="_blank">Delphi加密隐藏或还原Windows盘符驱动器</a></li><li><a href="/soft/5238.shtml" target="_blank">ImageVue 2.0 PHP+FLASH+XML高级相册</a></li><li><a href="/soft/7667.shtml" target="_blank">VB商品零售进销存程序含MSSQL数据库文件</a></li>
</ul>
<ul>
<li><a href="/jscss/code/1915.shtml" target="_blank">jQuery 模块拖动，拖动层效果，可淡入淡出</a></li><li><a href="/jscss/code/1914.shtml" target="_blank">jQuery单行新闻滚动</a></li><li><a href="/jscss/code/1913.shtml" target="_blank">经典的jQuery多行文本滚动</a></li><li><a href="/jscss/code/1912.shtml" target="_blank">JS图片切换学习版，没有过多修饰</a></li><li><a href="/jscss/code/1911.shtml" target="_blank">漂浮广告代码，Js演示</a></li><li><a href="/jscss/code/1910.shtml" target="_blank">边滚边停的JS图片滚动</a></li></ul>
<ul>
<li><a href="/soft/9217.shtml" target="_blank">递归读取数据库创建树控菜单的Delphi例子</a></li><li><a href="/soft/9199.shtml" target="_blank">VB抓取DLL或EXE应用程序内的图标资源</a></li><li><a href="/soft/9236.shtml" target="_blank">jQuery StartStopSlider 滚动切换插件</a></li><li><a href="/soft/9235.shtml" target="_blank">jQuery EasyUI 实例演示（菜单、TAB等）</a></li><li><a href="/soft/9227.shtml" target="_blank">VB+SQL2000考试卷（题库）生成与管理系统</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var lis = document.getElementById("Tabs").getElementsByTagName("li");
var uls = document.getElementById("TabsCon").getElementsByTagName("ul");
var order = 0;
for(var i=0; i<lis.length; i++){
lis[i].value = i;
lis[i].onclick = function(){
ChangeTabs(this.value);
};
uls[i].className = "hidden";
}
lis[order].className = "cur";
uls[order].className = "block";
function ChangeTabs(nowTab){
lis[order].className = "";
uls[order].className = "hidden";
order = nowTab
lis[nowTab].className = "cur";
uls[nowTab].className = "block";
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一种是预读出来，不符合显示规则的，隐藏，适合内容不多的页面。
一种是AJAX插入，适合规则多变，内容量大。
但是都得用到javascript。如过用AJAX的话，还需要网页程序语言的支持，如ASP,PHP
给你个简单的范例
==================================================
<ul>
<li id="i_1" onclick="showConter(1)"><a href="./">我第一</a></li>
<li id="i_2" onclick="showConter(2)"><a href="./">我第二</a></li>
<li id="i_3" onclick="showConter(3)"><a href="./">我才第三</a></i>
<li id="i_4" onclick="showConter(4)"><a href="./">我最后</a></li>
</ul>
<div id="conterBox">
<div id="conter_1">马马虎虎啦</div>
<div id="conter_2" style="display:none;">没什么好说的</div>
<div id="conter_3" style="display:none;">看样子我还得加油</div>
<div id="conter_4" style="display:none;">我是差等生</div>
</div>
<script type="text/javascript" language="javascript">
function showConter(id)
{
for(var i=1;i<=4;i++){
var cobj=document.getElementById("conter_" + i); //内容对象
var mobj=document.getElementById("i_" + i); //菜单对象
if(i == id) {
//符合
cobj.style.display = "block"; //显示
mobj.style.background = "#000"; //菜单改变背景
}else{
cobj.style.display = "none"; //隐藏
mobj.style.background = "";
}
}
}
</script>
==================================================
这个是预读内容隐藏的简单代码，你可以在次基础上扩展、丰富。
一种是AJAX插入，适合规则多变，内容量大。
但是都得用到javascript。如过用AJAX的话，还需要网页程序语言的支持，如ASP,PHP
给你个简单的范例
==================================================
<ul>
<li id="i_1" onclick="showConter(1)"><a href="./">我第一</a></li>
<li id="i_2" onclick="showConter(2)"><a href="./">我第二</a></li>
<li id="i_3" onclick="showConter(3)"><a href="./">我才第三</a></i>
<li id="i_4" onclick="showConter(4)"><a href="./">我最后</a></li>
</ul>
<div id="conterBox">
<div id="conter_1">马马虎虎啦</div>
<div id="conter_2" style="display:none;">没什么好说的</div>
<div id="conter_3" style="display:none;">看样子我还得加油</div>
<div id="conter_4" style="display:none;">我是差等生</div>
</div>
<script type="text/javascript" language="javascript">
function showConter(id)
{
for(var i=1;i<=4;i++){
var cobj=document.getElementById("conter_" + i); //内容对象
var mobj=document.getElementById("i_" + i); //菜单对象
if(i == id) {
//符合
cobj.style.display = "block"; //显示
mobj.style.background = "#000"; //菜单改变背景
}else{
cobj.style.display = "none"; //隐藏
mobj.style.background = "";
}
}
}
</script>
==================================================
这个是预读内容隐藏的简单代码，你可以在次基础上扩展、丰富。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个和DIV+CSS没多大关系 我是用包含文件的
先用div打好框架
顶部包含文件就是导航<!--#include file="nav.asp"-->
侧边包含文件<!--#include file="menu.asp"-->
中间就是要动态显示的内容<!--#include file="main.asp"-->
点击不同的菜单 通过传值到main.asp就可以了
<a href="main.asp?a=10" onmousemove="submenu('留言')"><b>留言板</b></a>
这是我的方法 如果有更好的想法 欢迎讨论啊
先用div打好框架
顶部包含文件就是导航<!--#include file="nav.asp"-->
侧边包含文件<!--#include file="menu.asp"-->
中间就是要动态显示的内容<!--#include file="main.asp"-->
点击不同的菜单 通过传值到main.asp就可以了
<a href="main.asp?a=10" onmousemove="submenu('留言')"><b>留言板</b></a>
这是我的方法 如果有更好的想法 欢迎讨论啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（10）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
