小编给大家分享一下Jquery如何实现移动端Tab选项卡效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！效果图：代码如下：&l
小编给大家分享一下Jquery如何实现移动端Tab选项卡效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-Scalable=no">
<title>移动端Tab选项卡</title>
<script src="Http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(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();
});
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
div, 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%;
}
</style>
</head>
<body>
<div class="nav">
<div class="tab border-b">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="curr">商品介绍</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >评价(99)</a>
</div>
<div class="content">
<ul>
<li >商品介绍</li>
<li>评价</li>
</ul>
</div>
</div>
</body>
</html>以上是“jQuery如何实现移动端Tab选项卡效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网JavaScript频道！
--结束END--
本文标题: jQuery如何实现移动端Tab选项卡效果
本文链接: https://www.lsjlt.com/news/67578.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0