tab栏切换遇到的bug

当我们使用tab栏进行切换的时候，会出现一个背景色，起初我以为是CSS伪类事件:active所产生的，但是经过测试并非是这样的情况。在手机上(安卓手机和苹果手机)进行测试，发现安卓会出现这样的情况，而苹果手机不会出现这样的情况。看看问题图片：

当点击以后出现这样的情况：

CSS 样式代码：

ul li{width: 100%;list-style: none;text-align: center;justify-content: space-between;float: left;font-size: 0.3em;color: #666;/* 出现该bug的罪魁祸首 cursor */cursor: pointer;padding-top: 8px;
}ul li:active {color: #75b5d1;background-color: #ddecff !important;
}

经过分析和调试发现，苹果系统是不支持cursor: pointer;这个样式的，所以点击切换的时候不会出现上述图片的情况，安卓则会出现，因为想到该项目可能会存在浏览器中进行预览，为了美观一点所以我添加了这个cursor: pointer;样式，最后把这个删除了，就不会出现这样的情况了。希望大家在解决问题的时候不要向我这样存在画蛇添足的情况！还是不要太根据自己的想想去写代码，不然自己就是一个BUG制造机了…

手机端点击＜li＞标签出现背景色的问题和解决方案相关推荐

vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索
看到标题,你可能第一反应是想着监听手机键盘的[完成]或[搜索]按钮,然后触发事件do something but ,No No No ,没有那么艰难复杂. vue中,要在手机端点击手机键盘的[完成]或 ...
解决手机端点击输入框后页面会被放大问题
在测试手机端页面输入框时,点击后整个页面被放大,并且在离开输入框.点击页面其他地方,页面并不会恢复原来的比例,很影响美观解决方法:只需在页面头部加入两句 <meta> 标签语句即可,若是 ...
微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
手机端点击图片全屏预览
<!doctype html> 手机端点击图片全屏预览 <div class="category"><img src="1.jpg" ...
手机端点击图片放大特效-PhotoSwipe插件
PhotoSwipe插件官方网站 http://www.photoswipe.com/ PhotoSwipe插件能实现手机端点击图片全屏放大再双击图片放大等功能但有一点不太好的是图片放大后再单击不 ...
移动端点击a标签后默认蓝色背景如何去除
在移动端开发时候,f12在电脑端(手机模式下)点击a标签,有个蓝色背景,通过苹果真机查看没有,安卓机也有,我们只需给body添加以下属性即可去除 -webkit-tap-highlight-color ...
点击li标签增加样式，并删除其它li标签样式
页面部分 <ul class="layui-nav layui-nav-tree" lay-filter="demo"><li class=& ...
添加li标签点击事件，删除当前点击li标签
1.创建一个 HTML 文件 2.在html中写ul标签,给ul标签设置id,在ul标签里面写三个li标签,在li标签里面写任意文本内容 3.在html中写一个button按钮给按钮设置一个id,设置 ...
js实现点击li标签弹出其索引值
据说这是一道笔试题,以下是代码,没什么要文字叙述的,就是点击哪个<li>弹出哪个<li>的索引值即可: <html> <head> <style& ...

手机端点击＜li＞标签出现背景色的问题和解决方案

tab栏切换遇到的bug

手机端点击＜li＞标签出现背景色的问题和解决方案相关推荐

最新文章

热门文章