-1

这是我的 HTML 的一部分。这部分将转换为一个小尺寸的选择框li每组一个组，通过单击组的每个li成员将显示，我为此使用了 CSS 过滤器。我的问题是如何通过单击选择框中的每个来重新排列li成员

        <ul class="nav nav-pills">
            <li class="filter" data-filter="all">
                <a href="#noAction">evey item</a>
            </li>
            <li class="filter" data-filter="web">
                <a href="#noAction">web</a>
            </li>
            <li class="filter" data-filter="photo">
                <a href="#noAction">photo</a>
            </li>
            <li class="filter" data-filter="identity">
                <a href="#noAction">identity</a>
            </li>
            <li class="filter" data-filter="news">
                <a href="#noAction">news</a>
            </li>
        </ul>

https://jsfiddle.net/amirhsh/0xtntxo6/ 在选择框中选择项目后 li 依赖于排列

4

1 回答 1

1

@amir，试试下面的代码：

HTML 代码：

<ul class="nav nav-pills">
        <li class="filter" data-filter="all">
            <a href="#noAction">evey item</a>
        </li>
        <li class="filter" data-filter="web">
            <a href="#noAction">web</a>
        </li>
        <li class="filter" data-filter="photo">
            <a href="#noAction">photo</a>
        </li>
        <li class="filter" data-filter="identity">
            <a href="#noAction">identity</a>
        </li>
        <li class="filter" data-filter="news">
            <a href="#noAction">news</a>
        </li>
    </ul>


<div class="all web hide" > <p> some web contents </p> </div>
<div class="all news hide" > <p> some news contents </p> </div>
<div class="all photo hide" > <p> some photo contents </p> </div>
<div class="all news hide" > <p> some news contents </p> </div>
<div class="all photo hide " > <p> some photo contents </p> </div>
<div class="all web hide " > <p> some web contents </p> </div>
<div class="all identity hide" > <p> some identity contents </p>
<div class="all web hide" > <p> some web contents </p> </div>
<div class="all identity hide" > <p> some identity contents </p> 
<div class="all news hide" > <p> some news contents </p> </div>
<div class="all identity hide" > <p> some identity contents </p>
<div class="all web hide" > <p> some web contents </p> </div>

代码：

.hide { display: none; }

JS代码： 

 $("li").click(function(){
    $("div").hide();
     var filter = $(this).data('filter');
    alert(filter);

    $("div").each(function(){
        if($(this).hasClass(filter)) {
             $(this).show();   
        }

    }); 
});

希望它会帮助你。:)

于 2015-07-06T11:26:14.853 回答