初步接触了一下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
属性和锚点的概念,加之编写网页的时候没有认真查看和思索样例的写法,造成了一点小小的尴尬。百度上暂时没有找到类似的问题,总结记于此。