移动端可滑动的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(‘立即购买‘) })})