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

Posted 2022-11-09 progress-

 

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(‘立即购买‘)
)
)