当前位置:Gxlcms > html代码 > a:active加动画点击无效的解决方案

a:active加动画点击无效的解决方案

时间:2021-07-01 10:21:17 帮助过:25人阅读

我们经常会遇到一个问题,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;
})

相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!


相关阅读:

CSS里的if条件hack怎么写

CSS网页错位怎么处理

怎么用CSS3做出灯光照射显示文字动画

以上就是a:active加动画点击无效的解决方案的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行