0

jQueryでソート可能なポートフォリオを作成しています。

問題は; ポートフォリオ アイテムのフィルターをクリックするたびに、ページが一番上にスクロールします。

それを防ぐ方法はありますか？

ここで問題を確認できます: http://alsite.com.br/flex/produtos.html

私のスクリプト：

<script type="text/javascript">
    $(document).ready(function(){
        var Portfolio = {
            sort: function(items) {
                items.show();
                $('#portfolio-content').find('div.portfolio-item').not(items).fadeOut(500);
            },
            showAll: function(items) {
                items.fadeIn(500);
            },
            doSort: function() {
                $('a', '#portfolio-sort').on('click', function() {

                    var $a = $(this);
                    if (!$a.is('#all')) {

                        var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content');

                        Portfolio.sort(items);

                    } else {

                        Portfolio.showAll($('div.portfolio-item', '#portfolio-content'));


                    }

                });
            }
        };

        Portfolio.doSort();     

    });

</script>

私のポートフォリオコード:

<div id="portfolio">
    <div id="portfolio-sort">
        <a href="#" id="all">TODOS</a>
        <a href="#" data-cat="a">ACM</a>
        <a href="#" data-cat="b">MDF</a>
        <a href="#" data-cat="c">AÇO INOX</a>
        <a href="#" data-cat="b">PVC ESPANDIDO</a>
        <a href="#" data-cat="c">AÇO GALVANIZADO</a>

    </div>
    <div id="portfolio-content">
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="b">B</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="b">B</div>
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="a">A</div>
        <div class="portfolio-item" data-cat="c">C</div>
        <div class="portfolio-item" data-cat="b">B</div>
    </div>

</div>
4

2 に答える 2

1

単に変更する：

$('a', '#portfolio-sort').on('click', function() { ...

に：

$('a', '#portfolio-sort').on('click', function(e) { ...

そして追加：

e.preventDefault();

- 

$('a', '#portfolio-sort').on('click', function() {
    e.preventDefault();

    ...
});

-

これにより、リンクがリンクとして機能する（およびに移動するprodutos.html#）ことができなくなります。

于 2013-03-15T13:11:19.760 に答える
1

リンクがリンクにならないようにする必要があります:)

$('a', '#portfolio-sort').on('click', function(e) {
    // stop being an link!
    e.preventDefault();

    var $a = $(this);

    if (!$a.is('#all')) {
        var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content');

        Portfolio.sort(items);
    } else {
        Portfolio.showAll($('div.portfolio-item', '#portfolio-content'));
    }
});

詳細：クリック

于 2013-03-15T13:11:21.623 に答える