刷新、加入收藏夹等功能正常使用,需要让当前的操作在uri上有所体现。但是改变uri的同时又不能引起页面的刷新,因此可以通过改变uri中的片段(fragment)来实现。例如,点击tab1后将uri改为http://www.example.com/example.html#tab1,点击tab2则将uri改为http://www.example.com/example.html#tab2。
复制代码 代码如下:
function showtab1() {
$("#tab2").hide();
$("#tab1").show();
window.location.hash = "#tab1";
};
function showtab2() {
$("#tab1").hide();
$("#tab2").show();
window.location.hash = "#tab2";
};
这样做已经使得uri产生了变化,但是无论通过http://www.example.com/example.html#tab1还是http://www.example.com/example.html#tab2访问页面都是显示tab1的内容,所以还需要在页面载入时读取#后的内容。
复制代码 代码如下:
$(document).ready(showtab());
function showtab() {
if (window.location.hash == "#tab2")
showtab2();
else
showtab1();
}
这样,刷新和加入收藏夹等功能都已经可以使用了,不过前进和后退还是会有麻烦。虽然这两个按钮已经变得可用,但是点击时网页的内容并没有发生变化。我们需要用到body的onhashchange事件。onhashchange事件并不是所有浏览器都支持的,如果要使不支持该事件的浏览器也检测#后内容的变化,可能需要写一个函数定期检测window.location.hash的变化或者自己实现onhashchange事件