请问这种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个回答
展开全部
你好，这是使用了ajax,页面不刷新技术。用同一个页面动态输出不同内容。详情请看百科：ajax
补充：楼主应该用过jquery等框架吧，jquery非常方便，比如
function getContent(yourArg){
$.get('callback.php?arg='+yourArg,
function(data){
//alert(data);
$('#yourContentDiv').html(data);
});
}
//jquery ajax get简单例子，可以返回后台输出的所有内容，并直接插入前台页面，不推荐。更复杂的用法可以在后台生成（构造）json或xml数据,前台content div预先写好模板，再用ajax获取并插入模板内更新内容。
补充：楼主应该用过jquery等框架吧，jquery非常方便，比如
function getContent(yourArg){
$.get('callback.php?arg='+yourArg,
function(data){
//alert(data);
$('#yourContentDiv').html(data);
});
}
//jquery ajax get简单例子，可以返回后台输出的所有内容，并直接插入前台页面，不推荐。更复杂的用法可以在后台生成（构造）json或xml数据,前台content div预先写好模板，再用ajax获取并插入模板内更新内容。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
单纯的Div+Css实现起来效果不如你看到的那样好 你所描述的那种效果一般是JavaScript+css或是Jquery+css或是Ajax+css 代码我这里有 需要的话加我好友
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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> <span></span>110</li>
<li>111 <span></span></li>
<li>112 <span></span></li>
<li>113 <span></span></li>
</ul>
<div id="TabsCon" class="cons">
<ul>
<li><a href="/soft/4764.shtml" target="_blank"> 1 </a></li><li><a href="/soft/8021.shtml" target="_blank"> 2 </a></li><li><a href="/soft/9011.shtml" target="_blank"> 3 </a></li><li><a href="/soft/1658.shtml" target="_blank"> 4 </a></li><li><a href="/soft/1852.shtml" target="_blank"> 5 </a></li><li><a href="/soft/1361.shtml" target="_blank"> 6 </a></li></ul>
<ul>
<li><a href="/soft/1361.shtml" target="_blank">1 </a></li><li><a href="/soft/3855.shtml" target="_blank">2 </a></li><li><a href="/soft/8467.shtml" target="_blank">3 </a></li><li><a href="/soft/5238.shtml" target="_blank">4 </a></li><li><a href="/soft/7667.shtml" target="_blank"> 5 </a></li>
</ul>
<ul>
<li><a href="/jscss/code/1915.shtml" target="_blank">1 </a></li><li><a href="/jscss/code/1914.shtml" target="_blank">2</a></li><li><a href="/jscss/code/1913.shtml" target="_blank">3</a></li><li><a href="/jscss/code/1912.shtml" target="_blank">4 </a></li><li><a href="/jscss/code/1911.shtml" target="_blank">5</a></li><li><a href="/jscss/code/1910.shtml" target="_blank">6</a></li></ul>
<ul>
<li><a href="/soft/9217.shtml" target="_blank">1 </a></li><li><a href="/soft/9199.shtml" target="_blank">2</a></li><li><a href="/soft/9236.shtml" target="_blank">3 </a></li><li><a href="/soft/9235.shtml" target="_blank">4</a></li><li><a href="/soft/9227.shtml" target="_blank">5</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>
<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> <span></span>110</li>
<li>111 <span></span></li>
<li>112 <span></span></li>
<li>113 <span></span></li>
</ul>
<div id="TabsCon" class="cons">
<ul>
<li><a href="/soft/4764.shtml" target="_blank"> 1 </a></li><li><a href="/soft/8021.shtml" target="_blank"> 2 </a></li><li><a href="/soft/9011.shtml" target="_blank"> 3 </a></li><li><a href="/soft/1658.shtml" target="_blank"> 4 </a></li><li><a href="/soft/1852.shtml" target="_blank"> 5 </a></li><li><a href="/soft/1361.shtml" target="_blank"> 6 </a></li></ul>
<ul>
<li><a href="/soft/1361.shtml" target="_blank">1 </a></li><li><a href="/soft/3855.shtml" target="_blank">2 </a></li><li><a href="/soft/8467.shtml" target="_blank">3 </a></li><li><a href="/soft/5238.shtml" target="_blank">4 </a></li><li><a href="/soft/7667.shtml" target="_blank"> 5 </a></li>
</ul>
<ul>
<li><a href="/jscss/code/1915.shtml" target="_blank">1 </a></li><li><a href="/jscss/code/1914.shtml" target="_blank">2</a></li><li><a href="/jscss/code/1913.shtml" target="_blank">3</a></li><li><a href="/jscss/code/1912.shtml" target="_blank">4 </a></li><li><a href="/jscss/code/1911.shtml" target="_blank">5</a></li><li><a href="/jscss/code/1910.shtml" target="_blank">6</a></li></ul>
<ul>
<li><a href="/soft/9217.shtml" target="_blank">1 </a></li><li><a href="/soft/9199.shtml" target="_blank">2</a></li><li><a href="/soft/9236.shtml" target="_blank">3 </a></li><li><a href="/soft/9235.shtml" target="_blank">4</a></li><li><a href="/soft/9227.shtml" target="_blank">5</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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这就是现今很流行的被称作“异步的javascript和XML技术” 即Ajax；其实实现方式不难 建议使用javascript类库jquery提供的ajax接口来做 会见的很多 只需填写相应属性值 就可以完成对网页的异步交互
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以是用滑动门技术，也可以用框架集结构，都能实现这个效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
