溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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選項卡效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
