In some Ajax are heavily used pages, sometimes not too dare to refresh, because the refresh may see after the original is very different from the page. Temporarily do not discuss the content of some pages in the case of a large number of updates on whether to use Ajax, this article simply to keep the browser forward, back, refresh and other functions.
This assumes a two-tabs page with a lot of text in each tab and possibly a picture. If you feel Tab2 is good now, add it to your favorites or send it to a friend. The next time you open it through your favorites or when your friends click on the link, you'll probably see the Tab1 content, and then click Tab2 to see what you want to see. If the page logic is more complex, it may take a multi-step operation to get back to what you want to see, which is not a good experience.
To refresh, add favorites, and so on, you need to make the current operation manifest on the URI. But changing the URI at the same time does not cause the page to refresh, so you can do so by changing the fragment (fragment) in the URI. For example, click Tab1 to change the URI to Http://www.example.com/example.html#tab1, and then click Tab2 to change the URI to HTTP://WWW.EXAMPLE.COM/EXAMPLE.HTML#TAB2.
Copy Code code as follows:
function ShowTab1 () {
$ ("#tab2"). Hide ();
$ ("#tab1"). Show ();
Window.location.hash = "#tab1";
};
function ShowTab2 () {
$ ("#tab1"). Hide ();
$ ("#tab2"). Show ();
Window.location.hash = "#tab2";
};
This has caused the URI to change, but either through HTTP://WWW.EXAMPLE.COM/EXAMPLE.HTML#TAB1 or http://www.example.com/example.html# The TAB2 access page displays the contents of the TAB1, so you also need to read the contents of the # after the page is loaded.
Copy Code code as follows:
$ (document). Ready (ShowTab ());
function ShowTab () {
if (Window.location.hash = = "#tab2")
SHOWTAB2 ();
Else
SHOWTAB1 ();
}
This way, refreshing and adding favorites are already available, but there's still trouble going forward and backwards. Although these two buttons have become available, the content of the page has not changed when clicked. We need to use the body's Onhashchange event. Onhashchange events are not supported by all browsers, and if you want to enable browsers that do not support this event to also detect changes to the content after the #, you may need to write a function to periodically detect window.location.hash changes or implement Onhashchange events yourself.
Sample Code package Download (Visual Studio 2010)
