这里给你提个大概的思路以及相关类似代码!
无刷新那是对表单提交和页面跳转来说的,只要你还没有向页面提交数据或页面转换,就不存在跳转,也就跟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>