来自 服务器&运维 2019-12-15 13:46 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

js实现tab选项卡切换功能_javascript技巧_脚本之家

偶然间在浏览网页时,发现这样的效果。当鼠标不经意间滑过tab时并不会切换,当鼠标停留在上面一段时候后才会切换。

本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下

 Document  *{ margin:0; padding:0; list-style: none; box-sizing: border-box; } .menu{ position: relative; display: flex; height: 20px; justify-content:space-around; } .menu span{ display: block; width: 100%; height: 100%; text-align: center; } .menu .line{ position: absolute; bottom:0; left: 0; width: 33.33%; height: 1px; background: red; -webkit-transition: all .2s; transition: all .2s; } .main{ position: relative; width: 100%; } .main li{ position: absolute; top:0; left:0; } .hide{ display: none; } .show{ display: block; }   menu1 menu2 menu3   

个人觉得用户体验不错,优点是1.当用户只是滑过标签,并不需要切换,而此时如果切换标签需要请求数据时,会避免不必要的异步请求;2.避免页面在用户不需要的时候切换跳动,影响用户体验。

1.html部分

  • menu1
  • menu2
  • menu3

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:js实现tab选项卡切换功能_javascript技巧_脚本之家

关键词: