<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font:normal 1em Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
a{ text-decoration:none; color:black;}
a:hover{ text-decoration:underline; color:red;}
.demo{
width:300px;
height:300px;
border:solid 1px #ccc;
margin:50px;
}
.tabs{
list-style:none;
}
.tabs li{
border:solid 1px #936;
border-radius:5px;
width:80px;
height:24px;
line-height:24px;
background:#ccc;
text-align:center;
float:left;
margin:10px;
cursor:pointer;
}
.cont{
width:300px;
height:250px;
background:#96F;
display:none;
}
.cont01{ background:#00F;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$(".cont").eq(0).show();
$(".tabs li").click(function(){
var $index = $(".tabs li").index(this); //获取当前点击的号数
$(".cont").hide(); //先将两个内容隐藏
$(".cont").eq($index).show(); //选中的当前号数的内容块显示
});
});
</script>
</head>
<body>
<div class="demo">
<ul class="tabs">
<li>环境问卷</li>
<li>土地问卷</li>
</ul>
<div class="cont cont01">
</div>
<div class="cont cont02">
</div>
</div>
</body>
</html>
我这个只是简单的实现点击内容块切换功能具体的你还是得结合你的结构写好css美化下，还有如果想要更美观更多关于这种功能的特效，你也可以直接百度，jquery tabs，，不过建议能自己写就自己写啦，当学习呗。。。。具体我的演示如下
初始化
点击后
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#divId").append(html);
}
});
