修改url，頁面不刷新

1、設置錨點特性(以bootstrap中標簽頁的代碼為例)

html：

<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>

js：

index.js:
var currenturl = window.location.href;
if(currenturl.indexOf('#')< 1) {
    window.location.href = currenturl + '#home';
} else {
    var hreftype = window.location.hash;//#后面的字段
    $("a[href="+hreftype+"]").click();//觸發此a的點擊事件
}

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

利用錨點方式切換，頁面刷新，也會定位至指定的頁面，但是如果頁面內容過長，出現滾動條時，錨點會定位至點擊的a元素，頁面不置頂了。

2、利用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);//?后面的字段
    $("a[href=#"+hreftype+"]").click();//觸發此a的點擊事件,注意字段拼接#
}


profile.js:

var currenturl = window.location.href;
var newUrl = (currenturl.split("?"))[0];
history.pushState('','',newUrl+'?profile');//前兩個參數可省略

以上兩種方式都能實現標簽頁刷新指向當前頁面，不會跳至默認首頁，url改變頁面不會自動刷新，但第二種方法更符合實際效果；

url改變，頁面不跳轉：

（1）錨點特性，或者說hash值變化（ps：window.location.hash），不會導致頁面刷新；

（2）使用pushState和replaceState，也不會導致頁面刷新；

補充一下pushState與replaceState的知識：

兩者都是html5的新特性，支持IE10以上，都有三個參數：

以history.pushState(state,title,url)為例：

（1）state：存儲JSON字符串，可以用在popstate事件中。

（2）title：現在大多數瀏覽器不支持或者忽略這個參數，最好用null代替。

（3）url：任意有效的URL，用於更新瀏覽器的地址欄，並不在乎URL是否已經存在地址列表中。更重要的是，它不會重新加載頁面。

兩者的區別：

pushState()是在history棧中新建一個歷史記錄，而replaceState()是替換當前記錄；

popState:

(1) popstate事件的state屬性會包含歷史項(history entry)狀態對象(state object)的拷貝。

(2) 調用history.pushState()或history.replaceState()不會觸發popstate事件。當瀏覽器做出動作時，才會觸發該事件，如用戶點擊瀏覽器的回退按鈕或者在Javascript代碼中調用history.back()；

window.onpopstate = function(e){

　　console.log(e);

}

或者 window.addEventListener('popstate',function(e){

　　console.log(e);

},false);

ajax請求后，瀏覽器點回退按鈕是無法回退到ajax請求前的狀態的，如果用pushState新增一個history記錄，再用popstate進行頁面回退，需要注意利用js控制點擊事件（即非用戶手動點擊）時，需要判斷是popstate導致的click事件還是用戶手動點擊的click事件,避免回退按鈕需要點擊多次才回退成功；（這里記憶尤新啊！！）