Question

我正在使用可过滤的投资组合。我对过滤投资组合的链接有一点问题。

当我点击按钮时，它会正确过滤投资组合，但之后它会自动连接到像xy.com/#myfilter这样的网站并尝试打开它。

也许你知道如何禁用它？

LINK SAMPLE：

<a href="#design" rel="design">Design</a>

JS-FILE如下：

(function($) {
  $.fn.filterable = function(settings) {
    settings = $.extend({
      useHash          : true,
      animationSpeed   : 500,
      show             : { width: 'show', opacity: 'show' },
      hide             : { width: 'hide', opacity: 'hide' },
      useTags          : true,
      tagSelector      : '#portfolio-filter a',
      selectedTagClass : 'current',
      allTag           : 'all'
    }, settings);

    return $(this).each(function(){

      /* FILTER: select a tag and filter */
      $(this).bind("filter", function( e, tagToShow ){
        if(settings.useTags){
          $(settings.tagSelector)
            .removeClass(settings.selectedTagClass);
          $(settings.tagSelector + '[href=' + tagToShow + ']')
            .addClass(settings.selectedTagClass);
        }

        $(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);
      });

      /* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */
      $(this).bind("filterportfolio", function( e, classToShow ){
        if(classToShow == settings.allTag){
          $(this).trigger("show");
        }else{
          $(this).trigger("show", [ '.' + classToShow ] );
          $(this).trigger("hide", [ ':not(.' + classToShow + ')' ] );
        }

        if(settings.useHash){
          location.hash = '#' + classToShow;
        }
      });

      /* SHOW: show a single class*/
      $(this).bind("show", function( e, selectorToShow ){  
        $(this)
          .children(selectorToShow)
          .animate(settings.show, settings.animationSpeed);
      });

      /* SHOW: hide a single class*/
      $(this).bind("hide", function( e, selectorToHide ){
        $(this)
          .children(selectorToHide)
          .animate(settings.hide, settings.animationSpeed); 
      });

      /* ============ Check URL Hash ====================*/
      if(settings.useHash){
        if(location.hash != '') {
          $(this).trigger("filter", [ location.hash ]);
        }else{
          $(this).trigger("filter", [ '#' + settings.allTag ]);
        }

        /* ============ Setup Tags ====================*/
        if(settings.useTags){
          $(settings.tagSelector).click(function(){
            $('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);
            $(settings.tagSelector).removeClass('current');
            $(this).addClass('current');
          });
        }
      });
    }
})(jQuery);


$(document).ready(function(){

    $('#portfolio-list').filterable();

});

是否也可以，我的搜索友好URLS有问题？非常感谢您的帮助。

最好的问候。

Answer 1

您需要对点击事件进行一些调整：

在您当前的点击功能：

$(settings.tagSelector).click(function(){
  $('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);

  $(settings.tagSelector).removeClass('current');
  $(this).addClass('current');
});

将其更改为：

$(settings.tagSelector).click(function(event){
  $('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);

  $(settings.tagSelector).removeClass('current');
  $(this).addClass('current');

  // push the hash into the url
  location.hash = $(this).attr('href');

  // stop the regular href
  event.preventDefault();
});

这允许您将哈希值放入URL中，但是当用户单击链接时阻止浏览器实际重新加载具有该哈希的页面！

了解更多信息：

event.preventDefault() | location.hash

可过滤的投资组合标签

1 个答案: