无刷新显示页面内容，JavaScript高手进来！

怎么实现这样的导航效果——点击一个导航链接只刷新导航下面的内容，而导航不改变，就像QQ空间里的导航效果，这个手段很常用所以有必要问下，有人说利用Ajax，有人说利用Jav... 怎么实现这样的导航效果——点击一个导航链接只刷新导航下面的内容，而导航不改变，就像QQ空间里的导航效果，这个手段很常用所以有必要问下，有人说利用Ajax，有人说利用JavaScript，有人说利用iframe，请知情者能够帮在下一个忙，写一下代码越详细越好，要是满意再加几十分！谢谢。展开

 我来答

3个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

匿名用户
2013-10-22

展开全部

要什么样的效果呢，<!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=gb2312" />
<title>下拉纵向及多级弹出式菜单www.aa25.cn</title>
<script type="text/javascript"><![CDATA[//><!]]></script>
<style>
ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px solid #ccc; font-size:12px;}
ul li { position:relative;}
li ul { position:absolute; left:119px; top:0; display:none;}
ul li a { width:108px; display:block; text-decoration:none; color:#666666; background:#fff; padding:5px; border:1px solid #ccc; border-bottom:0px;}
ul li a:hover { background-color:#ddd;}
/*解决ul在IE下显示不正确的问题aa25.cn*/
* html ul li { float:left; height:1%;}
* html ul li a { height:1%;}
/* end */
li:hover ul,li.over ul { display:block;}
</style>
</head><body>
<ul id="nav">
<li><a href="">文章</a>
<ul>
<li><a href="">CSS教程</a></li>
<li><a href="">DOM教程</a></li>
<li><a href="">XML教程</a></li>
<li><a href="">FLASH教程</a></li>
</ul>
</li>
<li><a href="">参考</a>
<ul>
<li><a href="">XHTML</a></li>
<li><a href="">XML</a></li>
<li><a href="">CSS</a></li>
</ul>
</li>
<li><a href="">BLOG</a>
<ul>
<li><a href="">全部</a></li>
<li><a href="">网页技术</a></li>
<li><a href="">UI技术</a></li>
<li><a href="">FLASH技术</a></li>
</ul>
</li> <li><a href="">摇滚</a></li>
<li><a href="">纯音乐</a></li>
<li><a href="">古典金曲</a></li>
<li><a href="">电影原声</a></li>
</ul>
</body>
</html>
文章出处：标准之路( http://www.aa25.cn/div_css/292.shtml)

已赞过 已踩过<

评论收起

匿名用户
2013-10-22

展开全部

Ajax和iframe都可以，如果内容比较少的话，用选项卡的方式也能实现，可以看看下面代码<!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=gb2312" />
<title>CSS选项卡</title>
<style type="text/css">
*{ padding:0px; margin:0px;}
body{ text-align:center;font-size:12px;}
.page{
width:600px;
margin:10px auto;
text-align:left;
}.tab_mo{
border:1px solid #ccc;
border-top:none;
padding:10px;
}.tab{
border-bottom:1px solid #ccc;
list-style:none;
padding:4px 5px 3px 5px;
}
.tab li{
display:inline;
font-size:12px;
}
.tab li a{
padding:3px 4px;
border:1px solid #ccc;
color:#888;
border-bottom:none;
text-decoration:none;
background:#f7f7f7
}.tab li a:hover{
background:#fff;
}.tab li.no a{
background:#fff;
border-bottom:none;
position:relative;
top:1px;
color:#000000;
font-weight:bold
}
</style>
<script type="text/javascript">
function tab(a,b,c)
{
for(i=1;i<=b;i++){
if(c==i)
{ document.getElementById(a+"_mo_"+i).style.display = "block";
document.getElementById(a+"_to_"+i).className = "no";
}
else{ document.getElementById(a+"_mo_"+i).style.display = "none";
document.getElementById(a+"_to_"+i).className = "q";
}
}
}
</script>
</head><body>
<div class="page">
<ul class="tab">
<li id="tab_to_1" class="no"><a href="#" onclick="tab('tab',4,1)">链接一</a></li>
<li id="tab_to_2"><a href="#" onclick="tab('tab',4,2)">链接二</a></li>
<li id="tab_to_3"><a href="#" onclick="tab('tab',4,3)">链接三</a></li>
<li id="tab_to_4"><a href="#" onclick="tab('tab',4,4)">链接四</a></li>
</ul>
<div class="tab_mo">
<div id="tab_mo_1">
内容一
</div>
<div id="tab_mo_2" style="display:none">
内容二
</div>
<div id="tab_mo_3" style="display:none">
内容三
</div>
<div id="tab_mo_4" style="display:none">
内容四</div>
</div>
</div>
</body>
</html>

已赞过 已踩过<

评论收起

匿名用户
2013-10-22

展开全部

iframe使用的话不利于搜索引擎收录。AJAX适合~！

已赞过 已踩过<

评论收起

更多回答（1）

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

无刷新显示页面内容，JavaScript高手进来！

其他类似问题

为你推荐：