侧边栏壁纸
博主头像
黑山老妖博主等级

记录精彩的坎坷人生

  • 累计撰写 72 篇文章
  • 累计创建 85 个标签
  • 累计收到 9 条评论

目 录CONTENT

文章目录

jquery移动端tab切换

我是我村的希望
2023-08-10 / 0 评论 / 0 点赞 / 16 阅读 / 2717 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2024-02-21,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

对于现代化的移动设备来说,tab切换功能是一个很常见的需求。而这种功能的实现也可以很方便,只需要使用 jQuery 就可以了。下面我们就来介绍一下如何使用 jQuery 实现移动端的 tab 切换功能。

$(document).ready(function(){
$(".tab-menu li").click(function(){
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".tab-content >div").eq(index).show().siblings().hide();
});
});

202308109287_879.jpg

首先,我们需要在 HTML 中定义一个 tab 菜单和 tab 内容的容器:

<div class="tab">
<ul class="tab-menu">
<li class="active">标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
</ul>
<div class="tab-content">
<div class="tab-1"></div>
<div class="tab-2"></div>
<div class="tab-3"></div>
<div class="tab-4"></div>
</div>
</div>

在 CSS 中,我们需要设置一些样式:

.tab-menu li {
display: inline-block;
padding: 10px;
}
.tab-menu li.active {
border-bottom: 2px solid #333;
}
.tab-content >div {
display: none;
}
.tab-content >div:first-child {
display: block;
}

在 JavaScript 中,我们通过点击事件来切换 tab,先获取当前菜单的索引,然后将该菜单标记为 active,同时将其它菜单的 active 移除掉。最后将当前菜单对应的内容显示出来,其它内容隐藏掉。

使用上述代码,就可以轻松实现移动端的 tab 切换功能了。如果需要添加更多的标签,只需要在 HTML 中添加 li 标签和对应的内容 div 即可。同时,如果需要改变样式,只需要修改 CSS 样式即可。

0
广告 广告

评论区