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

实现该效果的核心是使用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');//符合属性的显示（利用属性选择器）}
});

显示效果