导航条多个tab切换，实现筛选效果

最新推荐文章于 2024-07-05 16:14:04 发布

原创最新推荐文章于 2024-07-05 16:14:04 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#筛选效果

css 同时被 2 个专栏收录

12 篇文章

订阅专栏

6 篇文章

订阅专栏

本文介绍了如何利用HTML和JavaScript实现导航条上的多个tab切换效果，通过data-自定义属性来控制筛选显示的内容，详细讲解了html结构、js代码以及最终的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现该效果的核心是使用data-**的自定义属性
html导航条代码

<ul class="tab">
    <li data-type="all">全部</li>
    <li data-type="welfare">福利</li>
    <li data-type="system">制度</li>
    <li data-type=" management">管理</li>
    <li data-type="others">其他</li>
</ul>

html导航条下面的显示模块的代码

<div class="model" name="all"></div>
<div class="model" name="welfare"></div>
<div class="model" name="system"></div>
<div class="model" name="management"></div>
<div class="model" name="others"></div>

js代码：

$('.tab li').click(function() {
    var showTab = $(this).data('type');  //敲黑板，这部分是重点，获取当前自定义属性
    $('.model').addClass('none');        //不符合属性的隐藏
    $('.model[name='+showTab+']').removeClass('none');//符合属性的显示（利用属性选择器）}
});