将URL链接添加到同位素过滤器中

时间:2014-01-02 17:26:16

标签: jquery html html5 jquery-isotope

我的滤镜设置如下

<ul class="filters filter-portfolio">
                <li><a href="#" class="selected animated" data-animation="fadeInUp" data-filter="*">All</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1200" data-filter=".filter-collateral">Collateral</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1200" data-filter=".filter-enviromental">Environmental</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="150" data-filter=".filter-identity">Identity</a></li>
                <li><a href="http://turnpost.turnpostinteractive.com/all-work/logos/" class="animated" data-animation="fadeInUp" data-animation-delay="450">Logos</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="600" data-filter=".filter-illustration">Illustration</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="900" data-filter=".filter-motion">Motion</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1050" data-filter=".filter-packaging">Packaging</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="450" data-filter=".filter-web">Web</a></li>
            </ul>

当我点击“徽标”时,我不想过滤到徽标我只是想让它转到网址

您可以在此处查看该页面:http://turnpost.turnpostinteractive.com/all-work/

这是javascript

function initIsotope() {
    // Init Portfolio masonry
    var $container = $('.portfolio-container');
    $container.isotope({
        resizable: false,
        masonry: {
            columnWidth: 1
        }
    });
    $(document).on("click", ".filter-portfolio a", function(e) {
        e.preventDefault();
        $(this).closest('.filters').find('a').removeClass('selected');
        $(this).toggleClass('selected');


        var selector = $(this).attr('data-filter');
        $('.portfolio-container').isotope({
            filter: selector,
            masonry: {
                columnWidth: 1
            }
        }, function() {
            // Refresh waypoints
            $.waypoints('refresh');
        });

        return false;
    });


    // Init Portfolio masonry
    $('.entries-container').isotope({
        itemSelector : '.blog-entry'
    });
}

function reLayoutIsotope() {
    $('.isotope').isotope( 'reLayout' );
}

试过这个但仍然没有去

的javascript

        $(document).on("click", ".filter-portfolio a", function(e) {
        e.preventDefault();
        $(this).closest('.filters').find('a').removeClass('selected');
        $(this).toggleClass('selected');
        $('.noclick').off('click');

HTML

                <ul class="filters filter-portfolio">
                <li><a href="#" class="selected animated" data-animation="fadeInUp" data-filter="*">All</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1200" data-filter=".filter-collateral">Collateral</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1200" data-filter=".filter-enviromental">Environmental</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="150" data-filter=".filter-identity">Identity</a></li>
                <li><a href="http://turnpost.turnpostinteractive.com/all-work/logos/" class="noclick animated" data-animation="fadeInUp" data-animation-delay="450">Logos</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="600" data-filter=".filter-illustration">Illustration</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="900" data-filter=".filter-motion">Motion</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="1050" data-filter=".filter-packaging">Packaging</a></li>
                <li><a href="#" class="animated" data-animation="fadeInUp" data-animation-delay="450" data-filter=".filter-web">Web</a></li>
            </ul>

1 个答案:

答案 0 :(得分:0)

我会对此进行一次尝试,并猜测你有一些UI javascript可以将其转换为菜单。它可能会覆盖href。我尝试做的是删除第5个锚点链接的点击事件。

$(".filter-portfolio li").not(':nth-child(5)').find('a').click(function(e){

   .....

});

http://jsfiddle.net/FYQV4/

另一种实现此目的的方法是将选择器类添加到第5个元素:

<li><a href="http://turnpost.turnpostinteractive.com/all-work/logos/" class="noclick animated" data-animation="fadeInUp" data-animation-delay="450">Logos</a></li>

然后在您的其他javascript点击事件下方, 加: `$('。noclick')。off('click');

http://jsfiddle.net/FYQV4/1/