實現該效果的核心是使用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');//符合屬性的顯示（利用屬性選擇器）}
});

顯示效果