0

フィルタリング可能なポートフォリオを使用しています。ポートフォリオをフィルタリングするためのリンクに少し問題があります。

ボタンをクリックすると、ポートフォリオが正しくフィルタリングされますが、その後、xy.com/#myfilter などのサイトに自動的に接続して開こうとします。

たぶん、これを無効にする方法を知っていますか？

リンクのサンプル: 

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

JS ファイルは次のとおりです。

(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();

});

検索に適した URL に問題がある可能性もありますか? いつも助けてくれてありがとう。

よろしくお願いします。

4

1 に答える 1

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() | ロケーション.ハッシュ

于 2012-05-08T19:29:10.187 に答える