1, Modify the url without refreshing the page

Case 1: setting anchor characteristics (taking the code of the tab in bootstrap as an example)

Use the anchor mode to switch. When the page is refreshed, it will also be located to the specified page. However, if the page content is too long and the scroll bar appears, the anchor will be located to the clicked a element, and the page will not be placed at the top.

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" onclick="home()">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" onclick="profile()">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" onclick="message()">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" onclick="setting()">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">home</div>
    <div role="tabpanel" class="tab-pane" id="profile">profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">message</div>
    <div role="tabpanel" class="tab-pane" id="settings">setting</div>
  </div>

</div>

index.js:
var currenturl = window.location.href;
if(currenturl.indexOf('#')< 1) {
    window.location.href = currenturl + '#home';
} else {
    var hreftype = window.location.hash;//#Subsequent fields
    $("a[href="+hreftype+"]").click();//Click event triggering this a
}

profile.js:
var currenturl = window.location.href;
if(currenturl.indexOf('#')< 1) {
    window.location.href = currenturl + '#home';
} else {
    var hreftype = window.location.hash;//#Subsequent fields
    window.location.href = (currenturl.split("#"))[0]+'#profile';

}

Case 2: using history.pushState

index.js:

var currenturl = window.location.href;
if(currenturl.indexOf('?')< 1) {
    window.location.href = currenturl + '?home';
} else {
    var hreftype = window.location.search.substr(1);//? Subsequent fields
    $("a[href=#"+hreftype+"]").click();//Trigger the click event of this a, and pay attention to the field splicing#
}


profile.js:

var currenturl = window.location.href;
var newUrl = (currenturl.split("?"))[0];
history.pushState('','',newUrl+'?profile');//The first two parameters can be omitted

Both of the above two methods can refresh the tab page, point to the current page, and will not jump to the default home page. The page will not refresh automatically when the url changes, but the second method is more in line with the actual effect;

Supplement + summary

• If the url changes, the page will not jump:

1. Anchor feature, or hash value change (ps: window.location.hash), will not cause page refresh;
2. Using pushState and replaceState will not cause page refresh;

• Add the knowledge of pushState and replaceState:

Both are new features of html5. They support IE10 and above and have three parameters:
Take history.pushState(state,title,url) as an example:

(1) State: stores JSON strings, which can be used in the pop state event.

(2) title: now most browsers do not support or ignore this parameter. It is best to replace it with null.

(3) URL: any valid URL used to update the address bar of the browser, regardless of whether the URL already exists in the address list. More importantly, it does not reload the page.

• The difference between the two:
  pushState() creates a new history in the history stack, and replaceState() replaces the current record;

• popState:
  (1) The state attribute of the pop state event will contain a copy of the history entry and state object.
  (2) Calling history.pushState() or history.replaceState() does not trigger the popstate event. When the browser makes an action, it triggers the event, for example, the user clicks the browser's rollback button or calls history.back() in the Javascript code.

window.onpopstate = function(e){

　　console.log(e);

}
// perhaps 
window.addEventListener('popstate',function(e){

　　console.log(e);

},false);

After an ajax request, the browser can't click the back button to go back to the state before the ajax request. If you add a history record with pushState and then use the pop state to go back to the page, you need to pay attention to whether the click event caused by the pop state or the click event manually clicked by the user when js is used to control the click event (i.e. not manually clicked by the user), To avoid the fallback button, you need to click it multiple times to successfully fallback; (the memory here is especially new!!)