这个叫tab切换，前些日子写了个，你可以直接复制代码自己改改用
zhaoyue点name/稍后会写一个简洁的jquery的tab切换
只把“点”换成“.”就ok了
效果如下：
这个效果可以通过js与iframe的结合来实现。也可以通过jquery来实现。
下面是我写的通过jquery来实现的源代码：
<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
padding:0px
margin:0px
}
ul{
margin-top:30px
list-style:none
float:left
}
ul li{
float:left
display:block
margin-right:10px
border:1px solid #09F
padding:5px
font-size:13px
}
span{
font-size:13px
margin-left:20px
margin-right:10px
}
.textsty{
width:250px
}
div.theShow{
padding-top:20px
border:1px solid #06F
}
#test1 p{
margin-bottom:15px
}
</style>
<script type="text/javascript" src="childHL/jquery.js"></script>
<script type="text/javascript" >
function loadhtml(oObj,num){
for(var i=1i<=3i++){
$("#thUl li:nth-child("+i+")").css({background: "none"})
}
$("#thUl li:nth-child("+num+")").css({background: "#09F"})
if(num==1){
setTimeout("$('#test1').load('childHL/theOne.html')",100)//通过这句实现页面的切换
}
else if(num==2){
setTimeout("$('#test1').load('childHL/theTwo.html')",100)
}
else if(num==3){
setTimeout("$('#test1').load('childHL/theThree.html')",100)
}
}
</script>
</head>
<body>
<ul id="thUl">
<li onclick="loadhtml(this,1)" style="background:#09F">网页</li>
<li onclick="loadhtml(this,2)" style=" background:none">MP3</li>
<li onclick="loadhtml(this,3)" style="background:none">视频</li>
<li>图片</li><!---这一个子页面没有做，故没有添加相应的函数--->
</ul>
<div style="clear:left"></div>
<div class="theShow" id="test1">
<p>
<span>Bai 百度:</span><input class="textsty" type="text" /><input type="submit" value="搜索" />
</p>
</div>
</body>
</html>
关于iframe的我还没有做，等我做好后，再来show给你看（估计那时候早就有高人帮你解答了）。
另外也可以通过层的显示与隐藏来实现。
