这里给你提个大概的思路以及相关类似代码!
无刷新那是对表单提交和页面跳转来说的,只要你还没有向页面提交数据或页面转换,就不存在跳转,也就跟AJAX没有半点关系,其他的事就由JS来做了。
相关代码仅供参考:
程序代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.li1{float:left;width:150px; height:20px; display:block; border-right:1px solid #000000; border-bottom:1px solid #000000; line-height:20px; text-align:center; vertical-align:middle}
.li2{float:left;width:150px; height:20px; display:block; border-right:1px solid #000000; line-height:20px; text-align:center; vertical-align:middle;background-color:#FFFFCC; }
-->
</style></head>
<body>
<div style=" width:603px; height:400px; border:1px solid #000000; padding:0px;">
<div style="width:100%; height:20px;">
<ul id="ul" style=" list-style:none; padding:0px;margin:0px;">
<li onClick="ff(1)" class="li2" id="1">111</li>
<li onClick="ff(2)" class="li1" id="2">222</li>
<li onClick="ff(3)" class="li1" id="3">333</li>
<li onClick="ff(4)" class="li1" style="border-right:none" id="4">444</li>
</ul>
</div>
<div id="div" style="height:380px; width:100%;">
<div style="height:370px;width:593px; background-color:#FFFFCC; padding:10px 0 0 10px">
<br/>用户: <input type="text"><br/>
米吗: <input type="text"><br/><br/>
<input type="button" value="下一步" onclick="ff(2)"></div>
<div style="height:370px; width:593px;background-color:#FFFFCC;padding:10px 0 0 10px; display:none">22222</div>
<div style="height:370px; width:593px;background-color:#FFFFCC;padding:10px 0 0 10px; display:none">33333</div>
<div style="height:370px; width:593px; background-color:#FFFFCC;padding:10px 0 0 10px; display:none">44444</div>
</div>
</div>
</body>
</html>
<script>
function ff(obj){
var obj=document.getElementById(obj)
var ul = document.getElementById("ul")
var div = document.getElementById("div")
for(var i=0;i<ul.getElementsByTagName("li").length;i++)
{
if(ul.getElementsByTagName("li")[i]==obj)
{
ul.getElementsByTagName("li")[i].className="li2"
div.getElementsByTagName("div")[i].style.display="block"
}
else
{
ul.getElementsByTagName("li")[i].className="li1"
div.getElementsByTagName("div")[i].style.display="none"
}
}
}
</script>








