[日常折腾](一)jQuery AJAX刷新后闪回原页面

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