移动端可滑动的tab栏，并进行切换

 

HTML内容

<div class="nav">
<div class="tab border-b" id="category">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="curr">首页</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >专属</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >定制</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >商城</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >推荐</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >旅游</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" >其他</a>
</div>

<div class="content">
<ul>
<li style="display: block">
首页对应的内容
</li>
<li>
专属
</li>
<li>
定制
</li>
<li>
商城
</li>
<li>

推荐

</li>

<li>
旅游

</li>
<!-- 其他 -->
<li>
其他

</li>
</ul>
</div>
</div>

css部分

/* tab区域 */
div, input, textarea, button, a {
-webkit-tap-highlight-color: rgba(255,255,255,0.2);
}
ul, li, ol{
list-style: none;
}
ul{
margin-bottom: 0;
margin-top: 0;
}
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: 34.375rem;
height: 3.75rem;
position: absolute;
top:5.875rem;
padding: 0.625rem 0.3125rem;

}
.tab a {
float: left;
font-size: 0.875rem;
width: 13%;
height: 2.56rem;
line-height:2.56rem;
display: inline-block;
text-align: center;
color: #ffffff;
} */
/* .tab a:last-child {
border-right: 0;
} */
.tab .curr {
border-bottom: 2px solid #FFFFFF;
color: #FFFFFF;
}
.curr1 {
border-bottom: 2px solid #F8007A;
color: #E12F32;

}
.content ul{
padding: 0;
}
.content ul li {
display: none;
width: 100%;
text-align: start;
padding: 1.25rem 0;
}
#category{
width: 100%;
display: inline;
white-space: nowrap;
overflow-x: scroll;
float: left;
overflow-y: hidden;
position: absolute;
top:140px;
left: 0;
}
#category a{
display: inline-block;
font-size: 0.875rem;
width: 5rem;
height: 1.875rem;
padding-left: 0.625rem;
color: #ffffff;
}

 

js区域

$(function(){
$('.mui-icon-arrowleft').on('tap',function(){
mui.toast('返回上一层')
})

$('.guanzhu').on('tap',function(){
if (toggle) {
$(this).attr("src", "images/guanzhu.png")
toggle = false;
} else {
$(this).attr("src", "images/2019-09-17-yiguanzhu.png")
toggle = true;
}
})
$(".tab a").click(function() {
$(this).addClass('curr').siblings().removeClass('curr');
var index = $(this).index();
console.log(index)

$('.nav .content li').hide();
$('.nav .content li:eq(' + index + ')').show();
});

$('.tuangou').on('tap',function(){
mui.toast('跳转到购物车页面')
})
$('.liji').on('tap',function(){
mui.toast('立即购买')
})
var toggle = true;
$(".cang").click(function() {
if (toggle) {
$(this).attr("src", "images/cart_in.png")
toggle = false;
} else {
$(this).attr("src", "images/cart_in2.png")
toggle = true;
}
});

$('.addcart').on('tap',function(){
mui.toast('立即购买')
})
})

转载于:https://www.cnblogs.com/Progress-/p/11542674.html