取消tabbar中a标签在移动端点击时的蓝色

今天做移动端项目遇到一个点击出现的背景色 , 如下图 :

鼠标点击首页时出现了一个蓝色背景

尝试很多办法无果后 , 去找大爱的度娘问了一下 , 原来很简单

(1) 由于此处用了 router-link 跳转 , 也就是 a 链接啦 , 所以在 css 样式中给 a 标签设置如下样式即可

a {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-user-select: none;
	-moz-user-focus: none;
	-moz-user-select: none;
}

(2) 本人觉得可能会有多余代码 , 所以又试了一下 , 精简代码如下 :

a {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

对 , 就是把后面三行代码删了 , 因为删了也不影响效果 , 当然 , 使用的时候看您是否要写全了

注 : 以上方法只适用于移动端的 a 链接