| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1539 人关注过本帖
标题:页面跳转无刷新,请高手指教
只看楼主 加入收藏
lc1234
Rank: 2
等 级:论坛游民
帖 子:23
专家分:27
注 册:2009-7-5
结帖率:50%
收藏
已结贴  问题点数:10 回复次数:4 
页面跳转无刷新,请高手指教
图片附件: 游客没有浏览图片的权限,请 登录注册
看到上面的tab菜单用jquery控件做的,现在的问题是我想在输入基本信息后,直接切换到其他的tab选项卡,然后当我再次切换到人员基本信息这个选项卡时我上次输入的信息还存在,这个有办法做吗?请大家指教指教
搜索更多相关主题的帖子: 页面 指教 
2010-07-30 17:24
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
收藏
得分:10 
你要的功能完全是可行的,JS的DOM操作是主体,如果要达到精美的效果,得花上大量的时间!
    这里给你提个大概的思路以及相关类似代码!
    无刷新那是对表单提交和页面跳转来说的,只要你还没有向页面提交数据或页面转换,就不存在跳转,也就跟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>

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-07-30 18:15
lc1234
Rank: 2
等 级:论坛游民
帖 子:23
专家分:27
注 册:2009-7-5
收藏
得分:0 
如果数据已经提交了,这样还能做到吗
2010-08-02 15:30
gupiao175
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
威 望:40
帖 子:1787
专家分:7527
注 册:2007-6-27
收藏
得分:0 


如果你提交了那就不能这么做了。那就更加麻烦些,你得通过AJAX无刷新来提交!这样方能保证静态页面HTML的数据依然能存在,而不会因为提交刷新而消失!自己慢慢研究下!不要在一个问题上纠结不清!

Q:1428196631,百度:开发地 即可找到我,有事请留言!
2010-08-02 16:27
gulimeksoft
Rank: 4
等 级:业余侠客
威 望:4
帖 子:53
专家分:208
注 册:2010-8-5
收藏
得分:0 
你把初始值设置成提交前的数据试试呢,我没试过,说起玩的,呵呵
2010-08-05 23:43
快速回复:页面跳转无刷新,请高手指教
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.016294 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved