Question

我正在尝试使用bootstrap根据ID来过滤我的div标签。我的要求与此网页Ashley | One Page Parallax类似我尝试使用数据过滤器，但这个属性对我不起作用。

这是我的代码。

<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>

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

Answer 1

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

在JQuery数组变量中添加了div ID，然后创建了一个函数。通过将参数作为div ID传递，它将显示适当的div部分，其余部分将以隐藏模式进行。
如果有人可以改进此代码，例如添加动画功能，我感激不尽。

这是我更新的代码和JS fiddle。

<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>

JQuery功能：

 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");
            });
        }
    }

使用bootstrap过滤功能？

1 个答案: