Jquery 带引导的过滤器功能？

我正在尝试使用引导根据我的div标签的ID来过滤它们。我的要求类似于这个网页的网站 我尝试使用数据过滤器，但该属性对我无效

这是我的密码

<div class="container">
    <div class="span12">
        <ul class="nav nav-tabs">
 <li class="active"><a  href="#All">ALL</a></li>
            <li><a href="#Food">Food</a></li>
            <li><a href="#Drinks">Drinks</a></li>
            <li><a href="#Parties">Parties</a></li>
            <li><a href="#Games">Games</a></li>
</ul>
    </div>
    <div class="span12">
        <article class="span6" id="Food">
            Food #1,Food #2,Food #3,Food #..etc,
        </article>
        <article class="span6" id="Drinks">
            Drink #1,Drink #2,Drink #3,Drink #..etc,
        </article>
    </div>
    <div class="clearfix"></div>
        <div class="span12">
        <article class="span6" id="Parties">
            Party #1,Party #2,Party #3,Party #..etc,
        </article>
        <article class="span6" id="Games">
            Game #1,Game #2,Game #3,Game #..etc,
        </article>
    </div>
</div>

食物1、食物2、食物3、食物……等等，
喝1，喝2，喝3，喝……等等，
党一、党二、党三、党……等等，
第1局，第2局，第3局，等等，

---

请告诉我有人或任何使用bootstrap的工作示例？

我正在回答我自己的问题，但这部分解决了我的问题

在JQuery数组变量中添加了div id，然后创建了一个函数。通过将参数作为div ID传递，它将显示适当的div部分，其余部分将处于隐藏模式

如果有人能像添加动画功能这样改进代码，我将不胜感激

这是我更新的代码和密码

---

哈哈，如果你浏览Bootstrap3文档，你会发现它不是一个函数。。。

<div class="container">
        <div class="span12">
            <ul class="nav nav-tabs">
                <li><a href="#" onclick="filterdiv1('ALL')">ALL</a></li>
                <li><a href="#" onclick="filterdiv1('Food')">Food</a></li>
                <li><a href="#" onclick="filterdiv1('Drinks')">Drinks</a></li>
                <li><a href="#" onclick="filterdiv1('Parties')">Parties</a></li>
                <li><a href="#" onclick="filterdiv1('Games')">Games</a></li>
            </ul>
        </div>
        <div class="span12">
            <article class="span6" id="Food">
                Food #1,Food #2,Food #3,Food #..etc,
            </article>
            <article class="span6" id="Drinks">
                Drink #1,Drink #2,Drink #3,Drink #..etc,
            </article>
        </div>
        <div class="clearfix"></div>
        <div class="span12">
            <article class="span6" id="Parties">
                Party #1,Party #2,Party #3,Party #..etc,
            </article>
            <article class="span6" id="Games">
                Game #1,Game #2,Game #3,Game #..etc,
            </article>
        </div>
    </div>

 filterdiv1 = function (id) {
        var idarray = ["Food", "Drinks", "Parties", "Games"];
        if (id != "All") {
            idarray = $.grep(idarray, function (value) {
                return value != id;
            });
            $.each(idarray, function (key, value) {
                $("#" + id).show("highlight");
                $("#" + value).hide("slow");
            });
        }
        if (id == "All") {
            $.each(idarray, function (key, value) {
                $("#" + value).show("slow");
            });
        }
    }