[日常折腾](一)jQuery AJAX刷新后闪回原页面
来源:互联网 发布:c语言中char 使用 编辑:程序博客网 时间:2024/06/10 02:24
初步接触了一下Bootstrap和jQuery,试着做了一个简单的网页,不知道怎么传图就描述一下:左侧是一个导航栏,点击导航栏内容后,在右侧框架中使用jQuery AJAX刷新出对应内容。
导航栏内容是这样写的
<div id="navi"> <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a id="test1" href="">AJAX Test</a></li> <li role="presentation"><a id="test2" href="">something else</a></li> </ul></div>
其中一个导航栏项目对应的函数是这样的(browser是右侧框架的id,原谅在下胡乱取的名字)
$("#test1").click(function(){ $("#browser").load("ajax.txt");});
运行网页之后点击导航栏项目,右侧框架刷新为预想内容后却马上闪回原内容。
最初觉得可能是函数不够到位,试着改成了
$("#test1").click(function(){ $("#browser *").remove(); $("#browser").load("ajax.txt");});
想要通过移除browser中的所以元素以防止闪回。然而未果。
在下回想了一下添加jQuery函数之前进行的操作:添加导航栏项目和修改其CSS属性,用控制变量法进行试验,取消了对CSS的修改。未果。
又试着百度搜索了一下“AJAX刷新后闪回”,没有找到符合的解决方案。
最后把注意集中到了导航栏项目本身上。此前只尝试过将<p>
或者<button>
作为jQuery选择器的元素,问题会不会出在<a>
的属性上面。
这时把注意力集中在了href
属性上。Bootstrap给出的样例为
<li role="presentation" class="active"><a href="#">Home</a></li>
在下在编写时写成了href=""
,点击之后会打开当前页面,也就是刷新页面,直观印象上就会造成“右侧框架内容刷新后恢复原状”。
而写成href="#"
网页会跳转至一个空锚点,即网页顶部,并不进行刷新。
直接删除href
属性也能解决问题,不过光标移动至项目上时不会变为手形,比较难看。
随后修改为如下,问题解决。
<div id="navi"> <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a id="test1" href="#">AJAX Test</a></li> <li role="presentation"><a id="test2" href="#">something else</a></li> </ul></div>
小结:此次乌龙在于在下不熟悉<a>
元素的href
属性和锚点的概念,加之编写网页的时候没有认真查看和思索样例的写法,造成了一点小小的尴尬。百度上暂时没有找到类似的问题,总结记于此。
阅读全文
0 0
- [日常折腾](一)jQuery AJAX刷新后闪回原页面
- jquery ajax调用不刷新页面
- jQuery实现AJAX定时局部页面刷新
- jQuery实现AJAX定时局部页面刷新
- jQuery Ajax异步刷新局部页面
- jQuery实现AJAX定时局部页面刷新
- jquery 实现页面局部刷新ajax做法
- jquery ajax无刷新页面上传
- jQuery实现AJAX定时局部页面刷新
- jquery ajax无刷新更新页面
- 利用JQuery实现ajax异步刷新页面
- Ajax + Jquery页面无刷新投票
- jQuery实现AJAX定时局部页面刷新
- jQuery实现AJAX定时刷新局部页面
- ajax,jquery,$.post/$.get异步刷新div,局部刷新页面
- jquery+ajax+asp.net 页面无刷新效果
- 利用JQuery+Ajax实现aspx页面无刷新异步请求
- ajax提交并刷新页面yui和jquery
- DCT变换编码及C语言实现
- SQL 语句(五)--------------数据查询(集合查询)
- AJAX是什么?
- 手动配置ASP.NET4.5 --- 注册ASP.Net4.0 相关问题
- 如何理解*(int *)0x12ff7c = 0x100;?
- [日常折腾](一)jQuery AJAX刷新后闪回原页面
- servlet 数据存储几种方式和jsp 作用域
- 又遇JAVA中文乱码“坑”
- 学习攻略 | Python数据挖掘学习路线图
- 根据 *_train_test.prototxt文件生成 *_deploy.prototxt文件
- mysql不能插入中文的问题
- android自定义View 五子棋小游戏
- window驱动开发
- 一篇通俗易懂的文章---关于Java中的Annotation