tab选项卡功能我们也会经常接触，本文我们主要介绍jquery实现移动端tab选项卡效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助到大家。
效果图：
代码如下：
nbsp;html>移动端Tab选项卡 $(function() { $(".tab a").click(function() { $(this).addClass('curr').siblings().removeClass('curr'); var index = $(this).index(); number = index; $('.nav .content li').hide(); $('.nav .content li:eq(' + index + ')').show(); }); }) *{ margin: 0; padding: 0; } p, input, textarea, button, a { -webkit-tap-highlight-color: rgba(0,0,0,0); } ul, li, ol{ list-style: none; } a { color: #323232; outline-style: none; text-decoration: none; } .border-b { position: relative; } .border-b:after { top: auto; bottom: 0; } .border-t:before, .border-b:after { content: ''; position: absolute; left: 0; background: #ddd; right: 0; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .nav { background-color: #fff; text-align: center; } .nav .tab { width: 100%; position: relative; overflow: hidden; } .tab a { float: left; width: 49%; height: 2.56rem; line-height:2.56rem; display: inline-block; border-right: 1px solid #e1e1e1; } .tab a:last-child { border-right: 0; } .tab .curr { border-bottom: 2px solid #fc7831; color: #fc7831; } .content ul li { display: none; padding: 3%; width: 94%; }
登录后复制 商品介绍 评价
大家学会了吗？赶紧动手尝试一下吧。
相关推荐：
JavaScript插件Tab选项卡详解
layui选项卡效果实现代码
jquery实现tab选项卡切换效果
以上就是jQuery移动端Tab选项卡效果实现方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789755.html
