我們常常會遇到一個問題，a:active加動畫點擊無效，今天給大家看一下我的程式碼以及的解決方案，順便給大家分享一個如何不記錄url跳轉歷史的方法。
a標籤：active加動畫點擊無效
我的css程式碼如下：
.haorooms{ -webkit-animation: jpyd 1.5s cubic-bezier(0,.98,.44,1) both; animation: jpyd 1.5s cubic-bezier(0,.98,.44,1) both;}
.haorooms:active{ -webkit-animation: zoomOuts 1s ; animation: zoomOuts 1s; }登入後複製
html程式碼如下：
<a class="haorooms delay3 " href="/jingpin/" ></a>
登入後複製
蘋果手機中，a標籤點選無效。經查驗，a標籤並沒有遮擋，這是什麼原因？如何解決？
造成這種情況的原因是active有個1秒鐘的動畫，假如你長按按鈕，也是沒有辦法跳轉的。
a標籤：active加動畫點擊無效解決方案
其實這個解決方案是蠻多的，因為我們是在手機中展現，期望效果是在動畫播放結束之後跳轉，我們可以加入ontouchend事件，touchend之後跳到某個地址。
ontouchend="window.location.href='/jingpin/'"
登入後複製
加了這個之後，不管是長按，還是點擊，按結束之後，都是可以跳到指定位址的。
頁面跳轉歷史返回中不記錄
關於儲存瀏覽歷史，我之前文章中有提及過：SPA單頁web應用的一些簡介以及ajax無刷新頁面切換,歷史記錄後退前進解決方案
我們可以透過
history.replaceState
history.pushState(state, title, url)
登入後複製
對瀏覽器歷史進行操作。
但是實際情況中，也有我們無需記錄瀏覽歷史的情況，例如“一個頁面中有2個tab切換標籤，tab切換是修改了瀏覽器地址”，tab切換是預設記錄到歷史的。因此我們點擊返回按鈕的時候，不停的在2個tab中切換，但是，實際我們是想回到上一頁的，不是在2個tab中切換。那麼這種情況該如何解決呢？
這個我們想到了
location.replace(newURL)
#replace() 方法不會在 History 物件中產生一個新的記錄。當使用該方法時，新的 URL 將覆寫 History 物件中的目前記錄。
因此程式碼我們可以如下寫：
<ul id="haorooms">
<li><a href="http://www.haorooms.com/archives">标签一</a></li>
<li><a href="http://www.haorooms.com/tools/index">标签二</a></li>
</ul>
$('#haorooms li a').on('click', function (event) { //tab中a标签点击
event.preventDefault();
location.replace(this.href);
})登入後複製
上面程式碼在某些手機中傳回無效，因此方案失敗！
history.replaceState()和location.replace()方法
上面方法失敗了，我就得轉換思路了，看到張鑫旭大神前段時間也有一個類似的案例解決方案，因此我借鏡了一下！
解決方案如下：
$('#haorooms li a').on('click', function (event) {
event.preventDefault();
history.replaceState(null, document.title, this.href.split('#')[0] + '#');
location.replace('');
})登入後複製
首先透過HTML5 history.replaceState()方法把目前URL位址替換成以個井號#結尾的目前連結位址；
#執行location.replace('')刷新目前位址（此時#會忽略）；
透過這個方案，我們再怎麼切換tab，點擊返回之後，照常回到進入頁面的前一頁。不會再在tab中切換了！
因為history.replaceState從IE10才開始支持，假如要相容於更早的瀏覽器，或在PC端使用。看到張大神也封裝了一個函數，這裡我借用一下：
var fnUrlReplace = function (eleLink) {
if (!eleLink) {
return;
}
var href = eleLink.href;
if (href && /^#|javasc/.test(href) === false) {
if (history.replaceState) {
history.replaceState(null, document.title, href.split('#')[0] + '#');
location.replace('');
} else {
location.replace(href);
}
}
};登入後複製
上面函數可以如下應用
$('#haorooms li a').on('click', function (event) {
if (event && event.preventDefault) {
event.preventDefault();
}
fnUrlReplace(this);
return false;
})登入後複製
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
CSS裡的if條件hack怎麼寫
CSS網頁錯位怎麼處理
怎麼用CSS3做出燈光照射顯示文字動畫
#
以上是a:active加動畫點擊無效的解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！
